動態添加點擊函數到DOM元素

在我的測試代碼中，我有一個簡單的div，用作5個循環創建div元素的容器。我嘗試爲所有5個div元素添加一個點擊函數，但只有最後一個元素被賦予一個點擊函數。動態添加點擊函數到DOM元素

<div id="testbed"></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    for (i = 0; i < 5; i++) { 
     $("#testbed").html($("#testbed").html() + "<div id='" + i + "'>Hello!</div>"); 
     $("#" + i).click(function() { 
      alert(i); 
     }); 
    } 
}); 
</script>

有趣的是，而不是報警4，它提醒我真的不知道爲什麼它只是將點擊功能到最後一個div元素，而不是第一個4

來源

2011-07-20 Jay Sun

嘿，我很欣賞你們投入這個時間。你們中的一些人已經發布了工作示例，並且我將仔細審查每個響應，因爲你們都使用了不同的示例。謝謝您的幫助。 –

你也可以做一些這樣的效果：

$.each([1, 2, 3, 4, 5], function(index, value) { 
    $("#testbed").append("<div id='" + index + "'>Hello!</div>"); 
    $("#" + index).click(function() { 
     alert(index); 
    }); 
});

來源

2011-07-20 14:08:38

這是我遇到的第一個工作示例。非常感謝。 –

您click的所有處理程序共享相同的變量i。
因爲，循環後，i是5，他們都說5。

您需要在一個單獨的函數中創建每個處理程序，該函數以i作爲參數，以便每個處理程序都將獲得它自己的i。

例如：

function buildElement(i) { 
    $("#testbed").html($("#testbed").html() + "<div id='" + i + "'>Hello!</div>"); 
    $("#" + i).click(function() { 
     alert(i); 
    }); 
} 


for (i = 0; i < 5; i++) { 
    buildElement(i); 
}

來源

2011-07-20 13:54:24 SLaks

這是怎麼樣的？我真的只是在該循環之外創建一個新的函數，並通過添加點擊函數的那些div元素循環？ –

有了這個例子，它仍然不會將點擊功能添加到其他div。 –

通過重新設置HTML，您將清除DOM元素中的任何狀態，包括事件處理程序。你應該改用'append（）'。 – SLaks

以下稱爲JavaScript的關閉。在綁定時，您運行匿名函數，該函數返回另一個函數，該函數在觸發事件時執行alert(i)。第一個匿名函數「包裝」爲i創建了另一個變量範圍級別，因此當原始i在稍後增加時，匿名函數中的i保持不變。漂亮的小竅門。

<div id="testbed"></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    for (i = 0; i < 5; i++) { 
     $("#testbed").html($("#testbed").html() + "<div id='" + i + "'>Hello!</div>"); 
     $("#" + i).click(function (i) { 
      return function(evt) { 
       // inside here, you have access to the event object too 
       alert(i); 
      }; 
     }(i)); 
    } 
}); 
</script>

在 javascript closures

更多信息，順便說一句，如果你想點擊的事件添加到所有的div，你不能.html() 在每個循環更換，請使用.append()代替，就像這樣：

<div id="testbed"></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    for (i = 0; i < 5; i++) { 
     $("#testbed").append("<div id='" + i + "'>Hello!</div>"); 
     $("#" + i).click(function (i) { 
      return function(evt) { 
       // inside here, you have access to the event object too 
       alert(i); 
      }; 
     }(i)); 
    } 
}); 
</script>

來源

2011-07-20 14:12:16 zatatatata

這個例子沒有奏效。它只爲最後一個div項添加了點擊功能。 –

@Jay像一個魅力一樣工作：http://jsfiddle.net/QvZFd/ – zatatatata

我的意思是，我是唯一一個給你正確解決方案的響應者，而不是解決方法。 – zatatatata

您需要將click事件添加到對象。

$(function(){ 

     $('#testbed').empty();  

    for (i = 0; i < 5; i++) { 
      $('<div />').text('Hello').attr('id', i).click(function(){ 
       alert($(this).attr('id')); 
      }).appendTo('#testbed'); 
     } 

    });

來源

2011-07-20 14:13:50 simonlchilds

感謝您的幫助。它像一個魅力。 –

很高興能幫到你！ – simonlchilds

動態添加點擊函數到DOM元素

回答

相關問題