點擊addClass功能不能在動態html中工作（）

點擊功能在動態添加的html中不起作用。該類在新元素中測試爲true，但忽略該類的click功能 - 儘管它在其他元素中工作正常。點擊addClass功能不能在動態html中工作（）

下面是相關代碼：

// The added html element + addClass 
$('#sendResultMsg').html('<a href="javascript:void(0);" id="closeButt">Close</a>'); 
$('#sendResultMsg').find('#closeButt').addClass('closeButton'); 

// just for testing this alert confirms hasClass as true 
alert($('#closeButt').hasClass('closeButton'));

的「#sendresult」是在頁面元素和HTML似乎罰款「關閉」鏈接，但點擊時沒有任何反應。分配給類的點擊功能工作正常，在其他2點元素在頁面及其類似這樣的：

$('.toggleContactBox, .closeButton).on('click',function() { 
    cntBox = $('#contactBox'); 
    cntBoxPos = cntBox.css('right'); 
    if (cntBoxPos <= '-550px') { 
    cntBox.animate({ right: '0px' }, 200); 
    } else { 
    cntBox.animate({ right: '-550px' }, 200); 
    } 
});

來源

2013-03-13 El Eme

序來使用.on動態添加的元素，你必須將事件委託到一個更高元素綁定事件目前在DOM docs

嘗試

$(document).on('click','.toggleContactBox, .closeButton',function() { 
    cntBox = $('#contactBox'); 
    cntBoxPos = cntBox.css('right'); 
    if (cntBoxPos <= '-550px') { 
    cntBox.animate({ right: '0px' }, 200); 
    } else { 
    cntBox.animate({ right: '-550px' }, 200); 
    } 
});

來源

2013-03-13 10:43:19 dakait

無需綁定在'document'上的事件爲'＃sendResultMsg'已經存在於DOM中。 – iappwebdev 2013-03-13 10:47:55

我只是把我的觀點寫到原來的海報上，他如何使用它 – dakait 2013-03-13 10:48:50

謝謝dakait！剛剛解決了我的問題，現在工作正常！ – 2013-03-13 11:00:11

更換

$('.toggleContactBox, .closeButton).on('click',function() {

隨着

$('.toggleContactBox, .closeButton').on('click',function() {

你忘了'，當你使用類選擇。

來源

2013-03-13 10:45:37

你怎麼知道'.closeButton'在'.toggleContactBox'裏面？ – iappwebdev 2013-03-13 10:46:38

我錯過了帖子中的關閉逗號，但它在代碼中。這是兩個不同的類，它們執行相同的點擊功能，這就是爲什麼它們是逗號分隔的原因。無論如何，達卡特給了我一個可行的解決方案。我會試着理解爲什麼？和我的方法有什麼不同...無論如何。 – 2013-03-13 11:03:22

將其更改爲：

$('#sendResultMsg').on('click', '.toggleContactBox, .closeButton', function() { 
    ... 
});

文檔：http://api.jquery.com/on/

If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

來源

2013-03-13 10:45:41 iappwebdev

而不是 '上' 現場使用，它會工作

來源

2013-03-13 11:00:10 user1268130

點擊addClass功能不能在動態html中工作（）

回答

相關問題