追加動態添加元素

我有一個div，當頁面加載時存在。我追加了一個按鈕，另一個按鈕。然後我想單擊按鈕並將其添加到其中。追加動態添加元素

到目前爲止，第一部分是工作，但我不能追加到了動態創建的任何元素。

$(document).ready(function() { 

    // THIS WORKS 
    $("#Value").change(function() { 
     var value = $("#Value").val(); 
     $("#Question_Field").empty(); 
     for (var i = 1; i <= value; i++) { 
      $("#Question_Field").append('<input type="button" id="button" /><div id="test"></div>'); 
     } 
    }); 

    // THIS DOES NOT WORK 
    $("#test").click(function() { 
     console.log("Click"); 
     ("#test").append(STUFF); 
    }); 
});

它甚至沒有記錄點擊。

來源

2013-02-27 Jeff

主要有兩個問題。

當你掛鉤的情況下，沒有#test元素還不存在，所以沒有東西掛鉤。
你正在創建具有相同id多個元素。

此外，您的通話append缺少$開頭。

您可以修復第一使用事件代表團（這個代碼修復append以及）：

$(document).on('click', '#test', function() { 
    console.log("Click"); 
    $("#test").append(STUFF); 
});

這告訴jQuery來勾上document的click事件，但只有火處理，如果該事件起源打開或傳遞與給定選擇器匹配的元素（#test），因爲它已經冒泡到文檔中。

要解決的第二個問題，與同id多個元素，你需要改變你的循環輸出的元素。很可能你想要使用一個班級而不是id。

來源

2013-02-27 16:34:01

謝謝。這有多高效？是否需要搜索所有元素，直到找到每次匹配#test的元素爲止？如果我必須用不同ID的多個元素來做到這一點呢？也許像'#test'+ i – Jeff 2013-02-27 17:18:27

@Jeff：這很有效。在創建事件時，事件生成的實際元素是該事件對象（'event.target'）的一部分。所有jQuery必須做的，一旦點擊到達文檔，就從'event.target'開始，看它是否與選擇器匹配。如果沒有，它會轉到目標的'parentNode'並檢查它。如果不匹配，則轉到* that *的'parentNode'。即使你的HTML結構有15個嵌套元素（一個'div'包含另一個'div'，其中包含'tbody'，'tr'，'td'和九個*進一步*級別的'table'），那麼，這只是15個元素來檢查。 – 2013-02-27 17:21:48

@Jeff：如果你想匹配多個'id'值，你就可以像CSS一樣完成這些工作：'#test，#foo，＃bar'。但是，無論何時你列出多個這樣的'id'值，你都必須問自己是否應該使用一個類。 – 2013-02-27 17:22:37

click只能處理存在時，它被稱爲元素。您應該檢查.live()http://api.jquery.com/live/或.on()http://api.jquery.com/on/取決於你的jQuery版本。

來源

2013-02-27 16:33:28 hexblot

追加動態添加元素

回答

相關問題