Question

我正在使用jquery，下面是我的代码，我的问题是无论点击事件不起作用。

我可以使用qid正确

来记录console.log(qid)即问题ID

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");也未到达。

编辑：

我正在使用以下两个JS文件

jquery.min.js
jquery.mobile-1.2.0.min.js

Answer 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);
}

Answer 2

我已将您的代码缩短为：

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将绑定到被单击的元素，并且该元素可能没有该方法。

Answer 3

这有更好的工作机会

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);
        });
});

Answer 4

我认为它是event delegation和data 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）。

单击事件在jquery中不起作用

4 个答案: