无法访问动态生成的元素答案

【问题标题】：Can't access dynamically generated element无法访问动态生成的元素
【发布时间】：2015-01-14 23:02:08
【问题描述】：

无法访问动态生成的元素：这是我的 json 请求函数：

$.getJSON('/getJSON.php?selectorcat='+var1, function(jsonData){

var LI_list_html = '';
var sum = 0;

if(jsonData[0])
    {
        $.each(jsonData, function(i,value)
        {
        var catname = jsonData[i].name;
        var id = jsonData[i].id;
        var DIV_html = catname;

        LI_list_html = LI_list_html+'<li class="selectorsub" data-catselectsub="'+id+'" id="SelectorSubcat_'+id+'">'+DIV_html+'</li>';
        });
        }
        else
        {
            LI_list_html = 'No subcats there..';
        }

所以当我得到这样生成的 html 时：

<ul>
   <li class="selectorsub" data-catselectsub="169" id="SelectorSubcat_169">CAT1</li>
   <li class="selectorsub" data-catselectsub="170" id="SelectorSubcat_170">CAT2</li>
   <li class="selectorsub" data-catselectsub="171" id="SelectorSubcat_171">CAT3</li>
   <li class="selectorsub" data-catselectsub="172" id="SelectorSubcat_172">CAT4</li>
</ul>

我无法访问这个 li 元素：

$("[id^=SelectorSubcat_]").click(function() {
   alert($(this).data('catselectsub'));
});

我认为生成的元素不是准备好的 DOM，这就是为什么不能访问它们。

【问题讨论】：

你是 100% 正确的原因，这就是为什么我们有delegated events。顺便说一句，您的 jquery 选择器非常复杂，在这种情况下，您最好使用我看到的类。
为什么不依赖.selectorsub 类而不是[id^=]？它不仅更简洁，而且性能更好。

标签： jquery

【解决方案1】：

事件处理程序仅绑定到当前选定的元素；在您的代码进行事件绑定调用时，它们必须存在于页面上。

当您动态创建元素时，您需要使用 Event Delegation 和 .on() 委托事件方法。

即

$(document).on('event','selector',callback_function)

例子

$(document).on('click', "[id^=SelectorSubcat_]", function(){
    //Your code
});

您应该使用最近的静态容器代替document 以获得更好的性能。

【讨论】：

将此类事件委托给文档是一种不好的做法。出于性能原因，应将事件委托给最近的静态父级。看到您的声誉，您可能知道这一点，但我认为这应该是您回答的一部分。