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（）沒有附加標籤開火

回答

相關問題