4

クリック アクションを委任しようとしていますが、次の方法でしか機能しません。

$('input#doIt').on('click',  { name: "Karl" } , function(event){
    alert(event.data.name);

});

しかし、この方法ではありません:

$('input').on('click', '#doIt' , { name: "Karl" } , function(event){
    alert(event.data.name);
});

ドキュメントによると、それらは同じである必要があります。最初のものは1つの要素にのみバインドし、2番目のものは2つにバインドしますが、セレクターは1つに減らします。誰でもこれに光を当てることができますか？

ここにhtmlがあります

<div class="row">
     <div class="formLabel">Add Node:</div>
     <div class="formInput"> <input type="text" name="addNote"></div>
  </div>
<div id="goTo" class="row"><input id="doIt" type="submit" value="Submit"></div>
4

2 に答える 2

2

ドキュメントによると、それらは同じである必要があります。

いいえ、ドキュメントには、イベントをフックした実際の要素ではなく、セレクターが子孫をフィルター処理すると書かれています。

セレクタ

タイプ：String

イベントをトリガーする選択された要素の子孫をフィルタリングするためのセレクター文字列。

（私の強調）あなたの場合、inputwith はid doIt子孫ではありません。イベントを直接フックしています。

doIt inputの祖先、おそらくdiv.row要素を含むものにイベントをフックすることにより、委任されたフォームを使用します。

$("selector for the container of the rows").on('click', '#doIt', {name: "Karl"}, function(event) {
    alert(event.data.name);
});

(要素に直接フックするのではなく、委譲を使用する正当な理由があると仮定しています。doItたとえば、その要素は頻繁に削除および再作成される可能性があります。)

于 2013-04-28T08:31:52.750 に答える
2

最初のイベントは、イベントに直接使用しており、親要素のいずれにも委譲していないため、機能しています

$('input#doIt').on('click',  { name: "Karl" } , function(event){

doItここでは、id がである入力のクリック イベントを呼び出しているだけです。これは、入力が動的に追加された場合には機能しません。

そしてあなたの2番目に、あなたは委任していますが、同じ要素に..

$('input').on('click', '#doIt' , { name: "Karl" } , function(event){
  alert(event.data.name);
});

ここでは、id がdoIt 正しくない入力内にあるすべての要素に対してクリック イベントが呼び出されます。

最も近い静的親コンテナーに委任する必要があるため、これは機能します..

 $('div#goTo').on('click', 'input#doIt' , { name: "Karl" } , function(event){
   ...

注: 無効な HTML である同じ ID を持つ 2 つの要素がdoItあります。1 つをクラスに変更します。上記のコードで入力をクラスに変更しました。

于 2013-04-28T08:50:23.043 に答える