Question

我有一个简单的代码如下：

<html>
<body>        
    <div id="div1">
       <input class="input1" type="text" value="click me 1" />
    </div>

    <script type="text/javascript">
       $('.input1').click( function() { alert('clicked'); });

       $('#div1').append('<input class="input1" type="text" value="click me 2" />');
    </script>
</body>
</html>

我发现附加到“＃div1”的第二个文本框没有得到与“input1”类关联的点击响应。

我错过了什么？请告诉我，非常感谢。

Answer 1

jQuery Live Function ：为现在和将来与当前选择器匹配的所有元素附加事件处理程序。

Answer 2

当您尝试在.input1上绑定click事件时，它尚未可用，因此绑定将失败。

要解决此问题，您应该使用on：

$('#div1').on('click', '.input1', function(){alert('clicked')})

Answer 3

您应该使用.on()方法...

使用事件委派

$('#div1').on('click','.input1',function(...

这会将处理程序放在#div1上。当在其中发生点击时，运行'.input1'选择器，如果单击的元素匹配，则调用处理程序。

或者在旧版本的jQuery（1.7之前版本）中，使用.delegate()。

$('#div1').delegate('.input1','click',function(...

Answer 4

$('.something').click()将点击侦听器/回调附加到当前位于dom中的任何内容。

当您拥有在dom准备好之后创建的元素时，您可以使用$('.something').live('click', function() { ... });为新创建的元素执行完全相同的操作。

但是如果您使用的是最新版本的jQuery，请使用.on(...)，因为最近已弃用live。

Answer 5

click和bind的所有其他同义词仅适用于调用函数时存在的元素。如果您还想处理将来可能创建的那些，您可能必须在创建它们时将它们连接起来（通常很麻烦），或者使用事件委托。事件委托通过将事件挂钩到您将要放入元素的某种容器上，然后依赖于事件如何将DOM从子节点冒泡到父节点。

jQuery在其delegate和（最近）on函数中为事件委派提供了出色的支持：

// `delegate` (jQuery 1.4.2 and later)
$("selector for container").delegate(".input1", "click", function() {
    // I'll be called when there's a click on anything matching the
    // selector ".input1" contained by the container
});

// `on` (jQuery 1.7.0 and later; note that the param order is different from `delegate`)
$("selector for container").on("click", ".input1", function() {
    // I'll be called when there's a click on anything matching the
    // selector ".input1" contained by the container
});

如果元素所拥有的唯一公共容器是文档本身，那很好，您可以使用document作为容器。（jQuery有live函数，但它已被弃用，它目前只为你调用on。）但总的来说，你可以使用容器越有针对性，两者都越好性能视角和代码清晰度视角。例如，如果要向表单添加表单元素，请使用表单;如果向表中添加元素，请使用该表。等

Answer 6

使用Achmet所述的jQuery Live功能。这是必需的，因为第二个输入字段是在加载dom后的运行时创建的。

jQuery看不到动态元素？

6 个答案: