javascript - 向添加到 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);

我正在尝试让 click 函数在我使用上述 for 循环创建的元素上触发。谁能指出我正确的方向？

Answer 1

只要元素只是 a 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

.on()如果使用得当，jQuery 的方法将绑定到附加的元素。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);