Javascript jQuery可以'；当它'；从JSON解析的

首先，我在.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
}

//此代码有效
dic[0]=“分贝”；
dic[1]=“查询器”；
dic[2]=“poder”；
$（文件）。准备好了吗(
函数verbsarray（）{
对于（var i=0；i”+verbo+“\n”；
};          
$（'ul.h_list'）.html（verbos）；
});    
$（“.h_li”）。单击（函数（）{
警惕（“它起作用了！”）；
//美元找到了，这里是胡莉
}

因为这是一个原型，所以我开发了这个函数，它不是从静态数组中获取项，而是从加载的JSON中获取项。 函数解析所需的项并再次从中生成列表项

但是另一个函数（查找单击的

）现在不起作用

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

//这不起作用：-（
函数verbos_from_json（）{
$.getJSON（'verbos.json'，函数verbsarray（vjson）{
对于（var i=0；i”+verbo+“\n”；
};      
$（'ul.h_list'）.html（verbos）；
});         
};
$（“.h_li”）。单击（函数（）{
警报（“它起作用了？.no”）；
}

对于动态呈现的元素，您需要将委托绑定与

jquery

一起使用。而不是

单击（）

：

使用：

---

您必须将侦听功能集成到来自json的verbos_中

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

函数verbos\u from\u json（）{ $.getJSON（'verbos.json'，函数verbsarray（vjson）{ 对于（var i=0；i”+verbo+“\n”； }; $（'ul.h_list'）.html（verbos）； //**************************************************************** //})；//不好的地方：这是一个打字错误（经讨论后编辑） //**************************************************************** //这部分已经搬进来了 $（“.h_li”）。单击（函数（）{ //最好在发生多个事件之前关闭（如果对您来说是安全的） //$（“.h_li”）。关闭（'click'）。单击（函数（）{ 警报（“它起作用了？.no”）； } })；//这是一个打字错误（经讨论后编辑） };

---

因为元素是在ajax调用之后添加的。单击事件不会附加到异步添加的新元素。我将执行以下操作：

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

致：

---

这是不正确的。单击事件处理程序是否在函数闭包中并不重要，但我认为OP现在拥有它的方式更好。不，这非常重要！$。getJson是异步的，您只需请求侦听元素列表，然后希望它与新元素交互，而不绑定到新元素！这不是合作请检查我的答案（在术士的帮助下）和操作面板上的重复注释。这正是我所说的！要让它像您所展示的那样工作，请使用

$（'.h_li'）。单击（…）；

部分需要在

$.getJSON（）的成功回调函数中。这个想法是正确的，但您没有使用
.on（）
对于委派是正确的。您需要提供一个选择器作为第二个参数。
$（'.h_list'）。在（'click'，'.h_li'，function（）{…}）；
上。此外，委派时，将事件侦听器附加到父级（即
.h_list
）不是单个
.h\u li
元素本身。@War10ck-这是正确的-文书错误。谢谢你指出。我会更新答案你的编辑就快到了。更新第一个选择器作为父
.h\u list
而不是单个元素
.h\u li
。谢谢！这个解决方案很有效！主意不错，though您将拥有
n
个事件监听器，其中
n=vjson.data.length
与使用
.on（）
委派的事件监听器相反。这会占用更多内存，但可能不足以在UI中产生显著差异。在这种情况下，mike可以使用$（.h_list”）。委派（.h_li），“单击”，function（）{alert（“It works？…no”）}）；谢谢，但是将click侦听器移动到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 ) 
};

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

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

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