Question

在JQuery中，我可以通过以下方式为给定选择器的事件分配函数：

$(selector).click(function { /*something*/ });

但是，这仅适用于满足selector条件的当前现有对象。

现在，假设我们的应用程序中有一个我们不能或不想修改的外部插件或库，但它会生成满足selector标准的新项目和用户交互。< / p>

为简单起见，假设我们有一个外部插件，当用户点击按钮时会创建类.something的新元素。

有没有办法在Javascript或JQuery中为.click的所有现有和未来元素添加.something侦听器？

我的意思是，我可以在按钮上添加另一个.click函数，每次添加一个类时，找到它并添加新的监听器。但它是否能够使某个类的新元素以某种方式继承该侦听器？

Answer 1

您可以使用on方法进行事件委派。

$('body').on('click', '.mynewobject', function() {
    // do this and that
});

编辑：愚蠢我，首先忘了选择引号。

Answer 2

听起来像是说通过用户交互将元素添加到DOM中。对于这样的实例，如果在加载DOM时不存在然后用户点击然后将ELEMENT添加到页面中，则需要使用的是JQUERY函数 .live（）

示例：

$（“＃selector”）。live（“click”，function（）{alert（“这将是现在 work。“）; // jQuery 1.3+}）;

第一次加载DOM后创建的任何元素都需要JQUERY LIVE函数。

Answer 3

见文件： http://api.jquery.com/live/

它说：为匹配当前选择器的所有元素附加事件处理程序，现在和将来 。虽然它在jQuery 1.9中已被弃用和删除。

你可以试试 http://api.jquery.com/on/ 代替

Answer 4

.live()已弃用（也就是说不要将它用于更新版本的jQuery），请使用

$(document).on('click', 'selector', function() {
    //do stuff here
});

代替。这将考虑预先存在和动态添加的dom元素。见下面的例子：

$(document).ready(function() {
    $(document).on('click', '.btn', function() {
        alert('hi');
    });
    $('.add').on('click', function() {
        var clone = $('#template').clone(true).attr('id', '');
        $('body').append(clone);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="add">Add Button</a>

<button class="btn" id="template">Alert Button</button>

JQuery将事件扩展到给定类的新对象

4 个答案: