javascript - ライブ バウンド送信が Chrome の要素を指していない

Question

次のコードを実行すると、相対フォームが表示されるので、そこから情報を抽出できます。代わりにthis、ドキュメントを指します。

ライブバインディングの使用に関連していると思いますが、回避策はありますか?

 $('.form_one').add('.form_two').live('submit',function(e){
      e.preventDefault();
      console.log($(this));
    })

Answer 1

これはlive()、イベント ハンドラーを最上位の DOM 要素に委譲するためのショートカットであるためです。これが、ポイントdocumentのスコープが存在する理由です。this

$(e.target)回避策として、イベントを発生させた要素を取得するために使用する必要があります。

また、live()廃止されました。jQuery 1.7+ を使用している場合は、delegate()またはを使用する必要があります。on()

フィドルの例

Answer 2

http://jsfiddle.net/ZBaWd/onは、ハンドラーの使用方法を示します。

<div id="container"></div>​

var cont = $("#container");

// Note that I'm attaching it to container and not the forms themselves. 
// Then, as an additional parameter, I provide the selector "form" so that
// `on` is only fired for "form" elements that "submit" and are children of "#container"
$("#container").on("submit", "form", function(e){
    e.preventDefault();
    console.log($(this));
});


$("<form>").addClass("form_one").append("<button type='submit'>Submit 1</button>").appendTo(cont);
$("<form>").addClass("form_two").append("<button type='submit'>Submit 2</button>").appendTo(cont);