已解決430363個問題，去搜搜看，總會有你想問的

如何使用jQuery將事件附加到動態HTML元素？

首頁猿問如何使用jQuery將事件附加到動...

如何使用jQuery將事件附加到動態HTML元素？

JavaScript JQuery Node.js

牛魔王的故事 2019-05-21 16:09:14

如何使用jQuery將事件附加到動態HTML元素？假設我有一些jQuery代碼，它將事件處理程序附加到具有類的所有元素.myclass。例如：$(function(){ $(".myclass").click( function() { // do something });});我的HTML可能如下：<a class="myclass" href="#">test1</a><a class="myclass" href="#">test2</a><a class="myclass" href="#">test3</a>這沒有問題。但是，請考慮.myclass在將來某些時間是否將元素寫入頁面。例如：<a id="anchor1" href="#">create link dynamically</a><script type="text/javascript">$(function(){ $("#anchor1").click( function() { $("#anchor1").append('<a class="myclass" href="#">test4</a>'); });});</script>在這種情況下，test4鏈接是在用戶單擊時創建的a#anchor1。該test4鏈接沒有click()與之關聯的處理程序，即使它有class="myclass"?；旧?，我想編寫click()處理程序一次，并將其應用于頁面加載時出現的內容，以及稍后通過AJAX / DHTML引入的內容。知道如何解決這個問題嗎？

查看完整描述

4 回答

守著星空守著你

TA貢獻1799條經驗獲得超8個贊

有時這樣做（最高投票的答案）并不總是足夠的：

$('body').on('click', 'a.myclass', function() {
    // do something});

這可能是一個問題，因為觸發了訂單事件處理程序。如果你發現自己這樣做了，但由于它的處理順序而導致問題。你總是可以將它包裝到一個函數中，當被稱為“刷新”監聽器時。

例如：

function RefreshSomeEventListener() {
    // Remove handler from existing elements
    $("#wrapper .specific-selector").off(); 

    // Re-add event handler for all matching elements
    $("#wrapper .specific-selector").on("click", function() {
        // Handle event.
    }}

因為它是一個函數，每當我以這種方式設置我的監聽器時，我通常會在文檔就緒時調用它：

$(document).ready(function() {
    // Other ready commands / code

    // Call our function to setup initial listening
    RefreshSomeEventListener();});

然后，每當您添加一些動態添加的元素時，再次調用該方法：

function SomeMethodThatAddsElement() {
    // Some code / AJAX / whatever.. Adding element dynamically

    // Refresh our listener, so the new element is taken into account
    RefreshSomeEventListener();}

希望這有幫助！

問候，

反對回復 2019-05-21

泛舟湖上清波郎朗

TA貢獻1818條經驗獲得超3個贊

如果您要向DOM添加一堆錨點，請查看事件委派。

這是一個簡單的例子：

$('#somecontainer').click(function(e) {   
  var $target = $(e.target);   
  if ($target.hasClass("myclass")) {
    // do something
  }});

反對回復 2019-05-21

4 回答
0 關注
815 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用jQuery將事件附加到動態HTML元素？

如何使用jQuery將事件附加到動態HTML元素？

4 回答

添加回答

如何使用jQuery將事件附加到動態HTML元素？

如何使用jQuery將事件附加到動態HTML元素？