5

サーバーからJSONデータをダウンロードし、新しいテーブル行（のような$('<tr></tr')）を作成してドキュメントに挿入するJavaScriptを維持するようになりました。

aノードは、ある時点で次のように作成されます。

var a = $('<a class="foo" href="#"></a>');

その後、イベントは次のようにバインドされます。

a.click(function () {
  // yadda yadda

  return false;
});

唯一の問題は、これが機能していないように見えることです。バインディングスルーon()も非推奨でもありませんlive()。ハンドラーは単に「無視」され、起動せず、ページが一番上にスクロールします（のためにhref="#"）。イベントをバインドするとき、要素はすでにappendDOMに編集されています。どんな助けでも大歓迎です。

頭に浮かぶいくつかのコンテキスト情報：要素はデータを反復処理するループ内で作成されますが、JavaScriptでスコープが実際に奇妙なことをしている場合を除いて、問題にはなりません。さらに、要素で試した他のすべてが機能します。コンテンツ、スタイルを変更できますが、イベントバインディングのみが機能しません。そしてもちろん、jQueryのバージョンは1.8.3です。

4

6 に答える 6

6

編集済み

動的に作成された要素を操作するには、.on() をこのように設定する必要があります。また、必ず Jquery バージョン 1.8 (最新リリース) を使用してください。

また、一番上までスクロールしたくない場合は、クリックの標準アクションを防ぐ必要があります。

ここに作業フィドルがあります

var a = $('<a class="foo" href="#">ASD</a>');

a.appendTo($("body"));

$('body').on('click', 'a', function(e) {
    e.preventDefault();
    $(this).after('<br/><a class="foo" href="#">ASD</a>');
});
于 2012-11-30T17:43:57.557 に答える
3 
You have various options. You can bind to the element or to the document.

ドキュメントにバインド:

 $(document).on("click", "a.foo", function(event){
//do stuff here 
 });

ドキュメントにバインドすると、 a.foo 要素を自由に作成および破棄でき、それらはすべて関数に応答します。

要素にバインド:

$("a.foo").on("click", function(event){
//do stuff here
  });

要素にバインドすると、関数は以前に存在したすべての要素のみにバインドされます。したがって、ドキュメントの読み込みの最後または関数の最後でこれを行うようにしてください。

常にドキュメントにバインドすることをお勧めします!

于 2013-11-21T00:05:34.387 に答える
0

次の 2 つのことが頭に浮かびます。

  1. リンクにはテキストがないため、クリックしていません。
  2. あなたはそれをdomに追加していません。

ここには、あなたのものと非常によく似たコードで動作するフィドルがあります。

var a = $('<a class="foo" href="#">ASD</a>');

a.click(function() {
    alert('a');
});

a.appendTo($("body"));
于 2012-11-30T17:41:18.583 に答える
0

これを試して：

var a = $('<a class="foo" href="#">ASD</a>');
$("body").html(a);
a.click(function() {
    alert('a');
    return false;
});
于 2012-11-30T17:54:16.023 に答える
0

そのようにイベント委任を使用できます。

$('body').on('click','.foo',function(){
    alert('foo');
});

これにより、要素が存在する前にイベント ハンドラーを設定できます。

于 2012-11-30T17:44:40.557 に答える
0

要素を動的に作成する関数のスコープ内で関数をバインドしてみてください。

$('a.foo').on('click',function(event){
 //your code goes here
});
于 2013-05-25T15:34:20.887 に答える