jQuery中如何訪問新追加的HTML元素

HTML

<p><a class="clickme" href="#">I would like to say:</a></p>

jQuery的

$("a.clickme").click(function() { 
    $('p').append('<div><a href="#" id="say-hello">Hello</a></div>'); 
}); 

$("#say-hello").click(function(){ 
    alert('test hello'); 
});

下面是與例如小提琴代碼： http://jsfiddle.net/johnmorris/2UVYd/2/

第一次點擊功能正常啓動。但是，警報（或任何其他函數）不會觸發新添加的元素。我基本上明白，附加的元素不存在於頁面加載，所以jQuery不會「看到」它...因此，第二個點擊功能不會觸發。

我只是想知道是否有辦法解決這個問題。如果是這樣，那是什麼。我似乎無法得出這個想法。

來源

2012-04-13 John Morris

要知道的另一件事是：如果多次點擊，您的'a'會追加多個具有相同'id'的元素。這違背了HTML規範，因爲'id'在文檔中應該是唯一的。我會建議使用'class'來代替。 – jmoerdyk 2012-04-13 17:54:55

謝謝！我的實際代碼確實追加了一個類。我發佈了這個例子，因爲我的實際代碼非常冗長而且令人費解。但是，我已經想到了。再次感謝！ :) – 2012-04-13 18:13:10

您需要等到元素存在於指定事件：

$("a.clickme").click(function() { 
    $('p').append('<div><a href="#" id="say-hello">Hello</a></div>'); 
    $("#say-hello").click(function(){ 
     alert('test hello'); 
    }); 
});

注意，click分配新創建的錨是裏面的其他click回調。

@Vega正在使用另一種名爲「委託」的技術，您將「say-hello」的點擊分配給p而不是錨本身。當點擊錨時，事件會通過DOM「冒泡」，並被p標籤上的事件偵聽器捕獲。這工作正常，但這可能不是授權的正確時間。當您在公共容器（例如UL中的LI）內有一系列項目都必須處理同一個事件時，通常會使用委派。如果你只有一個「問好」，那麼我會建議不要使用委派。

如果您需要能夠多次點擊該按鈕並多次插入，那麼委派可能是正確的選擇（但您需要停止使用硬編碼的ID）。要麼...你可以這樣做：

$("a.clickme").click(function() { 
    $('<div><a href="#" class="say-hello">Hello</a></div>').find('.say-hello') 
      .click(function(){ 
       alert('test hello'); 
      }) 
     .end() 
     .appendTo('p'); 
});

這段代碼實際上挖掘到新創建的元素，並附加到事件之前附加到DOM。（哦，並注意到我正在使用className而不是id爲「say-hello」。）

來源

2012-04-13 17:58:28 Prestaul

這對我有用。其實，他們都「工作」，但這是我一起去的。謝謝您的幫助！你們真是太棒了！ :) – 2012-04-13 18:08:49

由於$("#say-hello")在將它綁定到點擊處理程序時不存在於dom中，因此您的代碼不起作用。

但是你可以使用.on像下面的語法，這將尋找元素與ID say-hello稍後將加入到「P」，

DEMO

$("p").on('click', '#say-hello', function(){ 
    alert('test hello'); 
    })

來源

2012-04-13 17:48:58

根據使用情況，委派可能是錯誤的選擇。如果只有一個元素，則無需委派... – Prestaul 2012-04-13 17:52:37

謝謝！我最終使用@Prestaul代碼，但你的工作也很好。謝謝您的幫助！ – 2012-04-13 18:09:37

你也試試這個，這避免了使用相同ID創建多個DOM元素的問題。它通過1到100之間追加一個隨機數的ID名稱給每個隨機ID：

<script> 
    $("a.clickme").click(function() { 
     var newId = "say-hello" + Math.floor((Math.random()*100)+1); 
     $('p').append('<div><a href="#" id="' + newId +'">Hello</a></div>'); 

     $("#"+newId).click(function(){ 
      alert('test hello'); 
     }) 
    }); 

</script>

注意，我把現有的<a>內點擊添加點擊處理程序。

蘭德姆不保證沒有衝突，但使範圍足夠大，它可以是一個安全的假設。或者只是使用一個計數器來確保沒有ID衝突。

來源

2012-04-13 17:54:49 Marc

感謝您的幫助！我最終可能會使用隨機數字的想法，但現在@Prestaul的代碼似乎工作得最好。再次感謝！ – 2012-04-13 18:10:44

jQuery(".your_append_element_class').live('click',function() { 
    // Your Code goes here.. 
});

來源

2013-04-10 14:53:18

$（...）。live不是一個函數... – 2017-07-06 20:48:24

jQuery中如何訪問新追加的HTML元素

回答

相關問題