0

Ajax呼び出しのコールバックで実行される次のコードがあります。

jQuery.each(res, function () 
{
 var element = $("<p id=\"" + this.UrlTitle +"\">" + this.Name + "</p>").live('click',function () { alert('hello from binded function call') });
  dataList.append(element);
});

「res」は整形式のJSONオブジェクトであり、HTML内のp要素も適切に作成されていることがわかります。

私の問題は、段落をクリックすると3つのアラートが実行され（「res」要素の長さは3）、p要素ごとに3回バインドが行われることです。

この動作の原因は何ですか？

4

4 に答える 4

4

.liveDOM要素（この場合はHTML文字列から作成されます）では使用できません。セレクター.liveでのみ機能します。ドキュメントの欠点のリストを参照してください。

ここでイベント委任を使用する理由はまったくわかりません。イベントハンドラーを要素に直接バインドする.onか、省略形を使用してください.click（追加のリファクタリングを行いました;））：

jQuery.each(res, function () {
    $("<p/>", {
         id: this.UrlTitle,
         text: this.Name
     }).on('click', function () { 
         alert('hello from binded function call') 
    }).appendTo(dataList);
});
于 2012-08-22T13:32:35.080 に答える
0

あなたは.live()かなり奇妙な方法で使用しています。.live()古いjQueryオブジェクトだけで（正しく）使用することはできません。使用.click()または.on()：

$.each(res, function () 
{
 var element = $("<p id=\"" + this.UrlTitle +"\">" + this.Name + "</p>").on('click', function () { alert('hello from binded function call') });
  dataList.append(element);
});

でも...

さまざまな属性とイベントリスナーを持つjQueryオブジェクトを作成するためのはるかに優れた構文があります。

$.each(res, function () 
{
    $("<p/>", {
        id: this.UrlTitle,
        text: this.Name,
        click: function () {
            alert('hello from binded function call')
        }
    ).appendTo(dataList);
});
于 2012-08-22T13:32:21.640 に答える
0

on()メソッドの代わりにメソッドを使用してくださいlive()。何が起こっているのかというと、イベントは親に3回アタッチされている（live()イベント委任を使用）ので、aがクリックされるたびに、pアタッチされている3つのハンドラーが起動します。

on()イベント委任を使用できますが、内部的にはlive()

jQuery.each(res, function () 
{
 var element = $("<p id=\"" + this.UrlTitle +"\">" + this.Name + "</p>").on('click',function () { alert('hello from binded function call') });
  dataList.append(element);
});
于 2012-08-22T13:32:23.933 に答える
0

.live（）を使用していて、onclick属性を追加していない場合、またはそのループに含めるべきではない場合。

LiveはCSSのように機能し、要素がページ上に動的に作成された場合でもバインドされます。bind（'click'、....）またはon（'click'、....）を使用すると、そのようには機能しません。ここで行っているように、その要素に明示的に設定する必要があります。

実際に行っているのは、そのループの反復ごとに、新しいonclickイベントを＃this.UrlTitleを使用してすべての要素にバインドすることです。

そのため、3つのアラートが表示されます。jQuery on（）またはbind（）を使用するか、idと同じようにonclickを設定します... onclick = "alert（'....'）;"。

于 2012-08-22T13:36:13.337 に答える