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()已弃用，您应该使用delegate()或者on()如果您使用的是 jQuery 1.7+。

示例小提琴

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);