0 
 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ループで作成した要素に対してクリック関数を起動しようとしています。誰かが私を正しい方向に向けることができますか？

4

6 に答える 6

2

要素が単なる。である限り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");
 });
于 2012-08-31T15:37:04.580 に答える
1

htmlを#containerに保存した後、これを使用します。

$('[id^="myBTN-"]', '#container').click(function () {
    $(this).closest('[id^="blah-"]').toggle('slow');
});
于 2012-08-31T15:39:16.087 に答える
1

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'）を使用できますが、パフォーマンスを犠牲にして想像します。

于 2012-08-31T15:40:43.477 に答える
0

動的に追加されたイベントをアタッチしようとする場合、単純な.click()ものでは実行できません。次を使用する必要がありますon。

$("#newElementparent").on('click', "#newElement", function() {});
于 2012-08-31T15:33:37.547 に答える
0

このようなことをします：

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")});
于 2012-08-31T15:40:36.217 に答える
-1

その場で要素を構築する方がよいでしょう：

 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);
于 2012-08-31T15:39:09.953 に答える