jQuery的。對（）方法沒有目標元素附加事件

我經常onclick事件，像這樣的工作：jQuery的。對（）方法沒有目標元素附加事件

$(document).ready(function() { 
    $("#guestlist .viewguestdetails").click(function() {   
     $(".guestdetails[data-id='18']").toggle(); 
    }); 
});

然而，當onclick事件是動態HTML，行，我插入到表，它不再有效。如：沒有任何反應。所以我查了這個帖子：Event binding on dynamically created elements?

而且在那裏回答了.on（）方法。

我添加了一個類NEWROW這個tr元素，現在有這樣的：

$(document).ready(function() { 
    $('.newrow').on('click', 'span', function() { 
     $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle(); 
    }); 
});

這裏我建立一個新的行和插入的是：

var newrow=''; 

    newrow += '<tr class="newrow" data-id="' + id + '">'; 

    newrow += '<td class="alignleft sorting_1"><span class="viewguestdetails" data-id="' + id + '">' + firstname + ' ' + lastname + '</span>';    
    newrow += '&nbsp;&nbsp;<span class="completeguestdetails" data-id="' + id + '">(' + $("#completedetails").attr('data-message') + ')</span><br/>'; 

    newrow += '<div class="guestdetails" data-id="' + id + '">'; 
    newrow += SOME DATA'; 
    newrow += '</div>'; 
    newrow += '</td>'; 

    //add checkboxes 
    var checkstatus = 'off'; 
    newrow += '<td><span class="attendance checkbox-' + checkstatus + '" data-id="' + id + '" data-daypart="day"></span></td>'; 
    newrow += '<td><span class="attendance checkbox-' + checkstatus + '" data-id="' + id + '" data-daypart="ceremony"></span></td>'; 
    newrow += '<td><span class="attendance checkbox-' + checkstatus + '" data-id="' + id + '" data-daypart="reception"></span></td>'; 
    newrow += '<td><span class="attendance checkbox-' + checkstatus + '" data-id="' + id + '" data-daypart="diner"></span></td>'; 
    newrow += '<td><span class="attendance checkbox-' + checkstatus + '" data-id="' + id + '" data-daypart="party"></span></td>'; 
    newrow += '</tr>'; 

    //add the row to the guestlist table 
    $('#guestlist tbody').prepend(newrow);

我用jQuery的調試器（https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi ），發現在插入的行或其內部的span標籤中，沒有附加jQuery事件。

我錯過了什麼？

UPDATE 我添加了這個，並將它移到document.ready（）函數之外。在這種情況下，附加事件：

$('#guestlist').on('click', 'span.viewguestdetails', function() { 
    $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle(); 
});

但是，那麼現有的行不再工作。也許這是因爲我仍然有這個在我的document.ready（）：

$("#guestlist .viewguestdetails").click(function() {   
    $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle(); 
});

所以，現在，無論是新插入的行函數正確或已經存在的行運作是正確的。

爲什麼？

來源

2013-09-16 Flo

事件委託的要點是使用頁面呈現時出現的DOM元素。據我瞭解您的.newrow不是。因此，嘗試：

$(document).on('click', '.newrow span', function() {

從jQuery的文檔：事件處理程序只能綁定到當前選擇的元素;它們必須在您的代碼撥打.on()時在頁面上存在。

來源

2013-09-16 18:54:54 Sergio

This Works！我發現奇怪的是，當我用'#guestdetails'或'tbody'替換'document'時，它們都是新插入行的父項，它不再有效。這兩個元素，就像你也提到的那樣，在頁面呈現時呈現。這怎麼可能？ – Flo

@Flo，我看不出你的標記。事件處理程序在元素被替換的情況下被刪除，情況可能如此嗎？無論如何，現在很高興它的工作:) – Sergio

我更新了我的文章，因爲當添加您的代碼時，現有的行不再起作用。我注意到Greg Greg Borenstein在這裏也提到了這個權利，但不知道這是否或如何應用：http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Flo

試試這個：

$(document).on('click', '.newrow span', function() {

要綁定事件到需要的時候在頁面加載存在的元素。

來源

2013-09-16 18:55:07 j08691

部分，上面寫着：

$('.newrow').on('click', 's...

應該actualy是：

$('parentOfnewrowElement').on('click', '.newrow span...

你在做什麼是有約束力的事件給所有.newRow元素目前在現有的文件。你應該做的是將事件綁定到沒有從文檔中移除的第一個父代。

來源

2013-09-16 18:56:26

jQuery的。對（）方法沒有目標元素附加事件

回答

相關問題