0

私はjqueryを使用していますが、以下は私のコードです。私の問題は、クリックイベントが機能しないことです。

を適切qidに使用して ie の質問 ID をログに記録できますconsole.log(qid)

function prepareQuestionHtml(questionList){

    var questions = "";
    for(var i = 0; i < questionList.length; i++){
        var questionId = questionList[i].qid;
        questions += "<div class='ui-link qst' id='" + questionId + "' >" + questionList[i].qst + "</div>";

        (function () {
            var qid = questionId;
            console.log(qid);
            $("#" + qid).click(function(){
                console.log("aaaaa");
                openAnswer(localStorage.selected_category, qid);
            });
        })();
    }
    $("#category-content").html(questions);
}

function openAnswer(category, questionId)
{
    console.log(category, questionId);
}

ここで何が問題になる可能性がありますか? console.log("aaaaa");リンクをクリックしても、ステートメントに到達しません。

編集 ：

次の2つのJSファイルを使用しています

  • jquery.min.js
  • jquery.mobile-1.2.0.min.js
4

4 に答える 4

1

これを試して：

function prepareQuestionHtml(questionList){

    var questions = "";
    for(var i = 0; i < questionList.length; i++){
        var questionId = questionList[i].qid;
        questions += "<div class='ui-link qst' id='" + questionId + "' >" + questionList[i].qst + "</div>";
    }

    $("#category-content")
      .html(questions)
      .on('click', 'ui-link', function(){
        var $this = $(this)
          , qid   = $this.attr('id')
        ;//var

        openAnswer(localStorage.selected_category, qid);
      })
    ;//#category-content
}

function openAnswer(category, questionId)
{
    console.log(category, questionId);
}
于 2013-02-09T07:33:49.743 に答える
1

コードを次のように短縮しました。

var questions = '';

for(var i = 0; i < questionList.length; i++){
    var questionId = questionList[i].qid;
    questions += "<div class='ui-link qst' id='" + questionId + "' >" + questionList[i].qst + "</div>";

    // attach click handler to `#questionId`
}
$("#category-content").html(questions);

ここでの問題は、ノードがDOM に挿入される前にクリック ハンドラーをアタッチしようとしていることです。

簡単なハック:

(function (qid) {
    console.log(qid);
    $("#category-content").on('click', "#" + qid, function() {
        console.log("aaaaa");
        openAnswer(localStorage.selected_category, qid);
    });
})(questionId);

ただし、シングル クリック ハンドラーを実行することをお勧めします。

$('#category-content').on('click', '.qst', function() {
    // handle the click here
});

を使用している理由がわかりませんでしthis.openAnswer()た。デフォルトthisでは、クリックされた要素にバインドされ、その要素にはおそらくそのメソッドがありません。

于 2013-02-09T07:38:46.810 に答える
0

これはうまくいく可能性が高くなります

function openAnswer(category, questionId)
{
    console.log(category, questionId);

}

$(function () {
  var questionList = {};
  var container = $("#category-content")
    for(var i = 0; i < questionList.length; i++){
        var questionId = questionList[i].qid;
        container.append("<div class='ui-link qst' id='" + questionId + "' >" + questionList[i].qst + "</div>");

    }

    container.on('click', '.qst',function() {
            console.log("aaaaa");
            openAnswer(localStorage.selected_category, this.id);
        });
});
于 2013-02-09T07:47:50.930 に答える
0

イベント委任とデータ APIの最良の候補だと思います

function prepareQuestionHtml(questionList){
    var questions = '';
    for(var i = 0; i < questionList.length; i++){
        var questionId = questionList[i].qid;
        questions += '<div data-qid="' + questionId + '" class='ui-link qst' id='' + questionId + '' >' + questionList[i].qst + '</div>';
    }
    $('#category-content').html(questions);
}

$(function(){
    $('#category-content').on('click', '.qst', function(e){
        openAnswer(localStorage.selected_category, $(e.currentTarget).data('qid'));
    });
});

function openAnswer(category, questionId) {
    console.log(category, questionId);
}

ここでは、単一のクリック イベントをコンテナー ノードに登録し、.qst要素内の任意のクリックをリッスンします。クリックが発生すると、要素に格納されているqidデータ ( )をフェッチします。data-qid

于 2013-02-09T07:48:02.937 に答える