无法访问动态生成的元素

Question

无法访问动态生成的元素:这是我的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,这就是为什么无法访问它们.

Answer 1

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

在动态创建元素时,需要使用.on()委托事件方法来使用事件委派.

即

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

例

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

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