如何在新添加的DOM上进行实时点击事件 [英] how to make live click event on new added DOM

问题描述

我是一个live()用户，我知道不赞成live(). 我尝试使用bind()在新添加的dom上运行该事件，但事实并非如此.

能否请您告诉我如何正确执行bind()?还是有其他方法可以执行此任务?

这是html:

<table>
    <tr>
        <td> hi there <span class="click">click me</span></td>
    <tr>
    <tr>
        <td> hi there2 <span class="click">click me</span></td>
    <tr>
    <tr class="end">
        <td></td>
    </tr>
</table>
<button class="add_new">add new row</button>  

这是js:

var new_row = '<tr><td> hi there, new row! <span class="click">click me</span></td><tr>';

$('.add_new').click(function() {
    $('.end').before(new_row);    
});


$('.click').bind('click', function() {
   alert('clicked');
});

如果可能的话，我想使用本机jquery的方法而不是插件.这是我的jsfiddle http://jsfiddle.net/bondythegreat/z3uXH/

解决方案

您需要使用jQuery的.on()或.delegate()的动态版本.

$('table').on('click', '.click', function() {
    // your code here
});

对于使用委派事件处理的动态行为，基本思想是(在jQuery对象中)第一个选择必须是静态父对象，该对象在安装事件处理程序后不会动态创建.作为第二个参数传递给.on()的第二个选择器是一个与您希望事件处理程序打开的特定项目匹配的选择器.这些项目可以在安装事件处理程序之后动态创建.

使用.click()或.bind()会为您提供静态事件处理程序，该处理程序仅对在代码最初运行时存在的对象起作用.

为使此代码更健壮，我建议两件事.首先，不要使用很容易与事件混淆的类名，例如"click".其次，在您的表上放置一个ID，以便可以在第一个选择器中引用该ID，而不是非常普通的"table"，后者可能在您页面的其他表上意外激活.

i am a live() user and i know somehow live() is deprecated. i've tried to use bind() to have the event on new added dom working, but it's not.

can you please tell me how to do bind() properly ? or is there any other method to do this task?

this is the html:

<table>
    <tr>
        <td> hi there <span class="click">click me</span></td>
    <tr>
    <tr>
        <td> hi there2 <span class="click">click me</span></td>
    <tr>
    <tr class="end">
        <td></td>
    </tr>
</table>
<button class="add_new">add new row</button>  

this is the js :

var new_row = '<tr><td> hi there, new row! <span class="click">click me</span></td><tr>';

$('.add_new').click(function() {
    $('.end').before(new_row);    
});


$('.click').bind('click', function() {
   alert('clicked');
});

if possible, i want to use native jquery's method and not plugins. this is my jsfiddle http://jsfiddle.net/bondythegreat/z3uXH/

解决方案

You need to use the dynamic version of jQuery's .on() or .delegate().

$('table').on('click', '.click', function() {
    // your code here
});

For dynamic behavior using delegated event handling, the basic idea is that the first select (in the jQuery object) must be a static parent object that is not dynamically created after the event handler is installed. The second selector which is passed as the second argument to .on() is a selector that matches the specific item you want the event handler on. These items can be dynamically created after the event handler is installed.

Using .click() or .bind() gets you static event handlers that only work on objects that are present at the time the code is initially run.

To make this code more robust, I'd suggest two things. First, don't use a class name like "click" that is very easy to confuse with an event. Second, put an id on your table, so that ID can be referenced in the first selector rather than the very generic "table" that may accidentally be active on other tables in your page.

这篇关于如何在新添加的DOM上进行实时点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！