是什么原因导致jQuery事件处理程序无声地失败? (奇怪的jQuery行为)

时间:2011-04-17 17:50:50

标签: jquery jquery-click-event

我收到了jQuery事件处理程序的意外行为。它与此问题中讨论的问题非常相似:Why does my jQuery event handler fail when attached to multiple elements?

基本上,一个简化的例子是,我的页面调用

   $(document).ready(function(){
        $('a.submit').click(function(e){
              e.preventDefault();
              alert(this.href);
        });
   });

假设标记为:

<html>
    <body>
        <a href="url1" class="submit">text1</a>
        <a href="url2" class="submit">text2</a>
        <a href="url3" class="submit">text3</a>
    </body>
</html>

提交类的所有链接除了最后一个提升事件。页面上.submit的最后一个链接未连接到事件处理程序。用click(fn)替换live('click',fn)有效。

我的问题是我不明白原始处理程序失败的原因。所有链接都是同时呈现的,我将处理程序订阅包装在$(document).ready()中,应该确保加载DOM。

我需要弄清楚这一点,因为我有一个更复杂的情况,处理程序在一个缩小的javascript文件中深深注册,所以如果我能理解如何防止这个错误而不是在它修复它时会非常有帮助发生。

还有一点需要注意的是,我在Firefox,Chrome和IE中收到了同样奇怪的行为。我正在使用jQuery1.5.1

1 个答案:

答案 0 :(得分:0)

考虑您提供的HTML:

<a href="url1" class="submit">text1</a>
<a href="url2" class="submit">text2</a>
<a href="url3" class="submit">text3</a>

和JavaScript:

$(document).ready(function(){
        $('a.submit').click(function(e){
              e.preventDefault();
              alert(this.href);
        });
   });

它必须有效。毫无疑问。但是,如果您的锚标记<a>是动态创建的,则无法将直接点击事件绑定到那些但通过实时生成,例如

$('a.submit').on('click', function(e){
    //magic here
});