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循环来触发我创建的元素上的click函数。有人能指出我正确的方向吗？

Answer 1

只要该元素只是String，您将无法添加处理程序。您必须在 $('#container').html(myOP);

之后添加处理程序
您可以尝试探索event delegation的想法。使用它，你可以做类似的事情：

$('#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'); } } });

Demo

或者你可以

$('#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);

将Click事件添加到添加到DOM的元素

6 个答案: