向添加到DOM中的元素添加Click事件

Question

 var myOP = '<div>';
 for (var i = 0; i < op.length; i++) {
     myOP += '<div>';
     myOP += '<div id="myBTN-' + [i] + '">' + op[i]['Field1'] + '</div>';
     myOP += '<div id="blah-' + [i] + '">' + op[i]['Field2'] + '</div>';
     myOP += '</div>';
 }
 myOP += '</div>';
 $("#myBTN-" + i).click(function () {
     $('#blah-' + i).toggle("slow");
 });
 $('#container').html(myOP);

我試圖讓點擊功能在上面創建的帶有for循環的元素上觸發。 誰能指出我正確的方向？

Answer 1

只要該元素只是一個String ，您將無法添加處理程序。 您必須在 $('#container').html(myOP) 之后添加處理程序；

您可以嘗試探索事件委托的思想。 使用它，您可以執行以下操作：

$('#container').on('click', function(e){
  e = e || event;
  var from = e.target || e.srcElement, i;
  if (from.id && /^mybttn/i.test(from.id)){
   i = +((from.id.match(/\d{0,}$/)||[-1])[0]);
   if (i>=0){
    $('#blah'+i).toggle('slow');
   }
  } 
});​

演示

或者，您可以

 $('#container').html(myOP);
 $('div[id^="myBTN-"]').on('click',function(){
     $('#blah-' + this.id.match(/\d{0,}$/)[0]).toggle("slow");
 });

Answer 2

將html保存到#container后，使用以下命令：

$('[id^="myBTN-"]', '#container').click(function () {
    $(this).closest('[id^="blah-"]').toggle('slow');
});

Answer 3

如果使用得當，jQuery的.on()方法將綁定到附加元素。 http://api.jquery.com/on/

<div id="existingParent">
    <!--<div class="added-later">Hi!</div>-->
    <!--<div class="added-later">Hi!</div>-->
</div>

偵聽添加后元素上的事件

$('#existingParent').on('click hover','.added-later', myFunction);

該方法必須綁定到存在的元素。 $（'body'）可以在這里使用，但是以我想像的性能為代價。

Answer 4

當你正在試圖將事件附加動態添加的，簡單的.click()不會做，你必須使用on ：

$("#newElementparent").on('click', "#newElement", function() {});

Answer 5

做這樣的事情：

var myOP = '<div>';
for (var i = 0; i < op.length; i++) {
    myOP += '<div>';
    myOP += '<div id="myBTN-' + [i] + '">' + op[i]['Field1'] + '</div>';
    myOP += '<div id="blah-' + [i] + '">' + op[i]['Field2'] + '</div>';
    myOP += '</div>';
}
myOP += '</div>';
$(myOP).appendTo('#container').find('div[id^="myBTN"]').click(function () {$(this).next().toggle("slow")});

Answer 6

您最好動態地構建元素：

 var container = $('<div>');
 for (var i = 0; i < op.length; i++) {
     container.append(
         $('<div>').append(
             $('<div>').text(op[i]['Field1']).click(function() {
                 $(this).next('div').toggle("slow"); 
             }),
             $('<div>').text(op[i]['Field2'])
         )
     );
 }
 $('#container').empty().append(container);