當添加新按鈕時，jQuery點擊事件不會觸發

當我單擊「顯示」按鈕時，將會調用show listener並顯示一個新的隱藏按鈕。但是，當我點擊'隱藏'時，爲什麼隱藏按鈕不被調用？當添加新按鈕時，jQuery點擊事件不會觸發

$('.myCss').append('<input type="button" class="show" value="Show"/>'); 

$('.show').on('click', function() { 
     console.log('show clicked'); 
    $('.myCss').append('<input type="button" class="hide" value="Hide"/>'); 
}); 

    $('.hide').on('click', function() { 
    console.log('hide clicked'); 
    $('.myCss').append('<input type="button" class="show" value="Show"/>'); 
    });

來源

2012-06-29 blue-sky

事件綁定是在加載時創建的。由於隱藏按鈕不存在，當頁面加載時，它不起作用。您需要在創建按鈕時添加綁定 – JSantos

它與要添加到頁面的元素的順序有關。如果顯示的代碼它的工作範圍內下降的隱藏代碼（儘管你應該檢查你的邏輯）：

$('.show').on('click', function() { 
    console.log('show clicked'); 
    $('.myCss').append('<input type="button" class="hide" value="Hide"/>'); 
    $('.hide').on('click', function() { 
     console.log('hide clicked'); 
     $('.myCss').append('<input type="button" class="show" value="Show"/>'); 
    }); 
});

jsFiddle example

在你原來的代碼，該代碼綁定click事件到隱藏按鈕存在於實際的隱藏按鈕之前，所以它實際上並不與任何東西綁定。通過在另一個代碼塊中移動它可以延遲執行該塊。您還可以使用.on()將點擊事件綁定到DOM中較高的事件，但實際上它們的最終結果基本相同。

the docs來自：

的事件處理程序僅結合到當前選擇的元素;在代碼調用.on（）時，頁面上必須存在。要確保元素存在並且可以選擇，請在頁面上的HTML標記中的 HTML標記中對元素執行文檔就緒處理程序內的事件綁定。如果新頁面被注入頁面，選擇元素並附加事件處理程序，當新的HTML被放置到頁面中時，頁面中的內容爲。或者，使用委託事件來附加處理程序事件，如下所述。

來源

2012-06-29 15:26:15 j08691

這比添加到父元素的點擊事件的性能差得多，就像我建議的一樣......除了點擊顯示然後隱藏然後再顯示它不起作用。 – iwiznia

問題是，當您嘗試在其上定義onclick事件時，「隱藏」按鈕不存在。我建議你添加它，設置display = none，然後顯示它

來源

2012-06-29 15:26:51 Pixou

當創建'.hide'事件處理程序時，'隱藏'按鈕還不存在。

您可以在創建元素之後設置事件處理程序，使用event bubbling或使用.live。

來源

2012-06-29 15:27:08 Iain

.live已棄用... http://api.jquery.com/live/ – iwiznia

有趣。我知道它已經變得不合時宜，但沒有意識到這種貶低。謝謝！ – Iain

是的，除了.on是更好的，因爲活着附加到身體的事件，並等待泡沫起來，你可以設置它在你想要的元素 – iwiznia

因爲當您設置事件時，.hide元素不存在。你可以嘗試設置的事件，如：

$('.myCss').append('<input type="button" class="show" value="Show"/>'); 

$('.myCss').on('click', '.show', function() { 
    console.log('show clicked'); 
    $('.myCss').append('<input type="button" class="hide" value="Hide"/>'); 
}); 

$('.myCss').on('click', '.hide', function() { 
    console.log('hide clicked'); 
    $('.myCss').append('<input type="button" class="show" value="Show"/>'); 
});

此附加點擊到.myCss元素（shich始終存在），但只有當點擊了裏面.hide元素上觸發觸發功能。

此解決方案更有效，每次創建元素時創建事件。

來源

2012-06-29 15:27:59 iwiznia

有些人已經正確地回答說隱藏按鈕是在事件綁定到控件後創建的。我建議使用不同的方法在較高級別（在我的示例中爲文檔）中使用處理程序，該處理程序將附加到將來的控件（當前已過時的.live）。

例子： http://jsfiddle.net/kQ2JA/1/

這將更好地滿足您的活動結合當前和未來所有的控制預期。

來源

2012-06-29 15:28:57 Joe

.live被棄用在最新版本的Jquery –

謝謝你的頭向上！ – Joe

不客氣 –

當添加新按鈕時，jQuery點擊事件不會觸發

回答

相關問題