jQuery on（）没有附加标签开火

我有一种感觉，这是一个令人尴尬的简单的错误，但我目前看不到它。jQuery on（）没有附加标签开火

我有一个表，我动态追加行到 - 每行的最后一列包含一个链接，点击时，应该删除该行。目前，行正在被添加罚款，但我不明白为什么事件附加到删除按钮不会触发。我已经删除了使用console.log（）进行测试的移除代码，但在控制台中什么都看不到。

我知道on（）应该使用附加的HTML，我错过了什么？

HTML：

<div id="people"> 
      <table> 
       <tr> 
        <th>First Name</th> 
        <th>Second Name</th> 
        <th>Age</th> 
       </tr> 
      </table> 
     </div> 
    <a href="#" id="add">Add</a>

JS：

var html = '<tr>'; 
      html += '<td><input type="text" /></td>'; 
      html += '<td><input type="text" /></td>'; 
      html += '<td><input type="text" /></td>'; 
      html += '<td><a href="#" class="remove_btn">x</a></td>'; 
     html += '</tr>'; 

$('.remove_btn').on('click', function() { 
     console.log('REMOVE BUTTON CLICKED');    
    //$(this).parent().parent().remove(); 
       return false; 
      }); 

$('#add').on('click', function() { 
    $('#people').append(html); 
    return false; 
});

来源

2013-02-24 ollie

您正在将click事件处理程序绑定到所有当前DOM元素。对于未来动态创建的元素，您需要使用此语法.on()进行事件委托。

$("#people").on("click", ".remove_btn", function(e) { 
    console.log('REMOVE BUTTON CLICKED');   
    e.preventDefault(); 
    return false; 
});

您需要在未修改的父元素中使用.on()。在这种情况下，我使用了#people。但是，您也可以使用更近的父元素缩小它的范围。

来源

2013-02-24 09:52:34 Alexander

非常感谢人 - 这就是它！直到最近才转移到on（）以便习惯它。干杯! （当我被允许时，会在5分钟内接受答案） – ollie 2013-02-24 09:56:57

很好，我也不知道这个。 – cIph3r 2013-02-24 10:00:13

-2

这只是一个订单的问题。在调用代码注册onclick事件之前，您需要附加HTML。

$('#add').on('click', function() { 
    $('#people').append(html); 

    $('.remove_btn').on('click', function() { 
      console.log('REMOVE BUTTON CLICKED');    
       //$(this).parent().parent().remove(); 
         return false; 
       }); 


    return false; 
});

来源

2013-02-24 09:52:17 Marryat

不幸的是，这不是什么OP是要求 – Alexander 2013-02-24 09:54:27

@ cIph3r，那是更糟。这是重新绑定事件处理程序 – Alexander 2013-02-24 10:00:22

当你在dom中没有的elems上应用事件时，会发生这种情况。所以，你必须将事件委托给其最接近的现有父：

$('table#people').on('click', '.remove_btn',function() {

来源

2013-02-24 09:54:32 Jai

jQuery on（）没有附加标签开火

回答

相关问题