Question

所以我在页面上有一堆按钮，其中插入了其他HTML，如下所示：

<input class="add_new_task" type="submit" value="Add New Task">
<input class="add_new_task" type="submit" value="Add New Task">
<input class="add_new_task" type="submit" value="Add New Task">

然后我的选择器如下：

$JQ('.add_new_task').live('click', function(){
    //do some stuff
});

然而，live（'click'）似乎只绑定到第一个元素，因此第二个，第三个等元素不会发生任何事情。关于我正在做什么的任何建议

编辑：

原来我是愚蠢的 - 我添加了一些错误检查，如果文本框为空则不允许提交 - 但我正在通过id定位文本框（愚蠢），而这反过来又选择了第一个文本框ID - 确实是空的。现在改为基于类的选择系统 - 感谢所有的答案！

Answer 1

在jQuery API网站上找到了这个

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。

尝试使用.on（）方法，除此之外它对我来说都很好

Answer 2

如果这是jQuery 1.7 +

，请使用.on（）

http://api.jquery.com/on/

编辑：此外，根据您的操作，可能不需要.on（）。试试.click（）......

$JQ('.add_new_task').click(function(){
  //do some stuff
});

Answer 3

首先你应该使用.on，因为从1.7开始替换所有事件绑定，但你可能会使用较低版本。当您使用实时时，您希望使用事件委派，这意味着您必须绑定到父对象，然后该父对象将处理来自（特定）子元素的特定传播事件。

将输入字段包装在像这样的div中

<div id="tasks">
    <input class="add_new_task" type="submit" value="Add New Task">
    <input class="add_new_task" type="submit" value="Add New Task">
    <input class="add_new_task" type="submit" value="Add New Task">
</div>

使用.live这应该可行：

$JQ('#tasks').live('click', function(){
    //do some stuff
});

更好的当然是使用.on像这样（相同的HTML）

$("#tasks").on("click", ".add_new_task", function(event){
    //do some stuff
});

http://api.jquery.com/on/

jQuery .live（＆＃39; click＆＃39;）似乎只绑定到第一个元素

3 个答案: