无法访问动态生成的元素

无法访问动态生成的元素：这是我的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+'
'+DIV_html+'
'; }); } else { LI_list_html = 'No subcats there..'; } 

所以，当我得到这样生成的HTML：

 
 
CAT1
 
CAT2
 
CAT3
 
CAT4
  

我无法访问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您应该使用最接近的静态容器以获得更好的性能。