jquery - Jquery 类在 .html() 之后不可用

Question

因此，当我静态创建元素时，我使用了许多完美运行的 Jquery 插件。但是当通过创建元素.html()或.append()这些插件似乎不再工作时，我似乎无法弄清楚为什么。有什么提示吗？提前致谢。

因此，这是我要创建并向其中添加插件数据表的表的示例：

<a href="javascript:void(0)" title="" onclick="AddElements();">Add</a>
<div id="Container"></div>

<script>
function AddElements()
{
CodeSrouce = '<table cellpadding="0" cellspacing="0" border="0" class="dTable"><thead><th>Name</th><th>Id</th></thead><tbody>';
for(i=0;i<3;i++)
{
CodeSrouce += '<tr><td>'+Name[i]+'</td><td>'+Id[i]+'</td></tr>';
}
CodeSrouce += '</tbody></table>';
$("#Container").html(CodeSrouce);
}
</script>

Answer 1

当插件被这样调用时：

$("#myElement").myPlugin();

该页面查找元素 myElement，然后将插件绑定到它。如果它找不到元素，那么您的代码将什么也不做。

因此，当您创建元素时，您需要在创建元素后运行代码。

$(function(){
  $("body").append("<ul id='myElement'><li>Hello</ul>");
});

$("#myElement").click(function(){
  console.log("This will never get triggered as it needs to be called after the     append"); 
});

Answer 2

使用 jQuery On 方法捕获动态创建的对象中的事件。普通事件处理程序不适用于动态创建的对象。

Answer 3

那是因为...动态创建的元素不会引用插件..

您可以在添加元素后再次调用该元素的插件...在 html() 或 append() 之后

例子..

对于日期选择器..

如果输入是动态附加的……说

 $("#whatever").append('<input id="test"/>';

即使$('#test').datepicker();在 document.ready 中，datepicker 也不会显示此附加输入，因为何时datepicker调用此元素在 DOMtree 中不存在，因此为此您需要在 append() 之后再次调用 datepicker 插件

$("#whatever").append('<input id="test"/>';
$('#test').datepicker();