Question

当我动态添加新元素时，我想对它应用一些函数。例如，要将常规<input>转换为日期时间选择器（通过某个插件），我需要

$('.dt').dateTime();

上述功能仅在我初次添加元素时首次使用。每当我稍后使用.append()添加它们时，都不会应用该功能。对于事件监听器，我改为使用$(document).on()：

$(document).on('click', '.dt', function () {});

它无论如何都适用。

在创作时使用的等价物是什么？

On SO我见过类似问题的解决方案，要么使用现在已弃用的函数.live()，要么使用某种我不想要的插件。

普通的jquery有没有解决方案？

Answer 1

无法在jquery中监听元素创建。

为了在将元素添加到DOM时初始化某些内容，您有以下几种选择：

使用MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver，但它并没有得到最好的支持。
在追加元素后手动初始化插件（最佳投注）。

Answer 2

根据.live() documentation，你可以使用

根据其后继者重写.live（）方法直截了当;这些是用于所有人的等效呼叫的模板三种事件依恋方法：

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

我在jsfiddle尝试一下，当你在父元素上设置.on函数时，所有元素（也在将来）中都会附加此事件

$( ".main" ).on('click', '.cl', function() { alert('clicked'); });

$(".add").click(function() { 
   $( ".main" ).append( "<p class='cl'>Test</p>" );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add">Add</div>
<div class="main">
    <p class='cl'>1</p>
    <p>2</p>
    <p class='cl'>3</p>
    <p>4</p>
</div>

Answer 3

另一个解决方案（其他关于@vxsx的答案和依赖插件行为）可能是使用委托事件，例如mouseenter并使用它初始化插件，例如：

$(document).on('mouseenter', '.dt:not(.dt_initiliazed)', function () {
    $(this).addClass('dt_initiliazed').dateTime();
});

另一个解决方案是在特定元素.dt上设置假CSS动画/转换，并使用相关事件animationEnd/transitionEnd初始化插件。这甚至适用于稍后在DOM中添加的元素。

Answer 4

在一些使用jQuery的现代浏览器上，您可以尝试：

$(document).on('DOMNodeInserted', '.dt', function(event) {
    $(event.currentTarget).dateTime();
});

此功能实际上已弃用，因此我建议您遵循vxsx的答案并使用MutationObserver工具，或者更好的是，每次附加.dt元素时手动应用该功能。它不需要比实际设置事件监听器更多的代码。

Answer 5

您可以使用MutationObserver检测新DOM元素并强制绑定这些新项目。

您可以阅读：http://gabrieleromanato.name/jquery-detecting-new-elements-with-the-mutationobserver-object/

使用jquery对新创建的元素执行操作

5 个答案: