0

私はこの問題を抱えています:
私はjqueryを通して特定のhtmlを挿入しています。その挿入されたhtmlには、関数をバインドしたクラスがあります。この関数は呼び出されていません、私は感じています、挿入されたhtmlはまだjsによって見られていません。

私の挿入コード。

$(function(){
  $('#einf').on('click', function(){
    $('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr');
  });
});

挿入はうまく機能していると推測できます。これは私のバインドされた関数です:

$(function(){
  $('.ame').on('click', function(){
     alert('test');
  }); 
});

同じクラスの既存の要素でテストしましたが、ameそれで動作しています。ヘルプとガイダンスに感謝します

4

4 に答える 4

3

追加した要素に対して、クリックバインドを再度実行する必要があります。多分このようなものがうまくいくでしょう:

$('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr').find('.ame').on('click', function(){
    alert('test');
});
于 2013-02-11T08:20:22.233 に答える
1

イベントの委任を試してください:http://jsfiddle.net/xehu9/

$('#einf').on('click', '.ame', function(e){ //<-----pass it here.
    e.stopPropagation(); //<---------stop the event bubbling here.
    alert('test');
});

これは、ページの準備ができたときにdomに存在しない要素のクリックを実装しようとしているために発生します。

ドキュメントから:

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが.on()を呼び出すときにページに存在している必要があります。

于 2013-02-11T08:20:28.210 に答える
1

.live()代わりに試してください.on()

http://jsfiddle.net/ThobiasN/Pt3db/

  $(function(){ 
    $('#einf').on('click', function(){ alert ('some');
      $('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr');
    });
    $('.ame').live('click', function(){
       alert('test');
    }); 
  });
于 2013-02-11T08:35:46.763 に答える
0

動的に作成された要素を参照することはできません。これは、javascriptの実行時にDOMにないため、動的なhtmlコンテンツの代わりにTEMPLATESを使用することをお勧めします。

ただし、このアプローチに従う場合は、jqueryで要素メソッドを連結できます。

$(function(){
$('#einf').on('click', function(){
$('<tr><td><a class="ame">delete</a></td></td></tr>')
.insertAfter('#append_tr')
.on('click',function(){
 alert('test');
});
});
});
于 2013-02-11T08:23:00.043 に答える