Question

首先，我在.js文件中创建了一个简单的数组，并编写了函数来从中生成列表项。然后点击新创建的li元素应该做点什么。

//This code works

dic[0] = "decir";
dic[1] = "querer";
dic[2] = "poder";


$(document).ready(
    function verbsarray() {

        for (var i = 0; i < dic.length; i++) {      
                var verbo = dic[i];                         
                verbos += "<li class='h_li'>" + verbo + "</li>\n";
        };          
        $('ul.h_list').html(verbos);                       
});    

$(".h_li").click(function() {
    alert("it works!");
    //Dollar finds .h_li here
}

由于这是一个原型，然后我开发了该函数来获取不是来自静态数组的项，而是来自加载的JSON。函数解析所需的项目，并再次从中生成列表项。

但另一个功能（寻找点击的<li class="h_li">）现在不起作用......

//this doesnt work :-( 

function verbos_from_json () {

    $.getJSON('verbos.json', function verbsarray(vjson) {
        for (var i = 0; i < vjson.data.length; i++) {       
            verbo = vjson.data[i].verb;                         
            verbos += "<li class='h_li'>" + verbo + "</li>\n";
        };      

        $('ul.h_list').html(verbos);
        });         
};

$(".h_li").click(function() {
    alert("it works?.. no");
}

Answer 1

对于动态呈现的元素，您需要使用jquery的委托绑定。而不是click()：

$(".h_li").click(function() {
    alert("it works?.. no");
};

使用on()：

$(".h_list").on('click', '.h_li', function() {
    alert("it works?.. no");
};

Answer 2

您必须将您的听力功能集成到verbos_from_json

中

function verbos_from_json () {

$.getJSON('verbos.json', function verbsarray(vjson) {
    for (var i = 0; i < vjson.data.length; i++) {       
        verbo = vjson.data[i].verb;                         
        verbos += "<li class='h_li'>" + verbo + "</li>\n";
    };      

    $('ul.h_list').html(verbos);
 //****************************************************************
    //}); // bad place : it was a typo ( edited after discussion ) 
 //****************************************************************

// THIS PART HAS MOVED IN
$(".h_li").click(function() {
// better to off before (if is safe for you) to prevent multiple event
// $(".h_li").off('click').click(function() {

    alert("it works?.. no");
}
}); // it was a typo ( edited after discussion ) 
};

Answer 3

因为在ajax调用之后添加了元素。 click事件未附加到异步添加的新元素。我会这样做：

function verbos_from_json () {

    $.getJSON('verbos.json', function verbsarray(vjson) {
        for (var i = 0; i < vjson.data.length; i++) {       
            verbo = vjson.data[i].verb;                         
            verbos += "<li class='h_li'>" + verbo + "</li>\n";
        };      

        $('ul.h_list').html(verbos);

        // bind here
        $( ".h_li" ).bind( "click", function() {
                alert( "It works" );
        });
    });         
};

<强> {OR}

如War10ck所述，可以在json中完成委托而不是绑定。

变化：

$(".h_li").click(function() {
    alert("it works?.. no");
};

要：

$( ".h_list" ).delegate( ".h_li", "click", function() { 
      alert("It works?.....no") 
})

当jQuery从JSON解析时，jQuery无法找到元素

3 个答案: