jQuery事件不会触发，直到第二次点击？

Question

我有以下jQuery代码。我第一次点击链接时，什么也没有发生;但是，第二次单击该链接时，会发生预期的操作。

$("a[rel]").bind("click", function(){ 
    $(".close_button_change_password").attr('id','change_password_'+$(this).attr('id')); 
    $(this).overlay({ 
     // disable this for modal dialog-type of overlays 
     closeOnClick: true, 
     mask: { 
     color: '#fff', 
     loadSpeed: 200, 
     opacity: 0.8 
     } 
    }); 
}); 

这里是我的HTML：

<a href="#" rel="#change_password" id="1">change password</a> 

有谁知道我怎么可能去解决这个问题？预先感谢您的帮助。

Answer 1

尝试

$("a[rel]").live("click", function(){ .... 

或者你可以尝试..，但我不认为这将解决这个问题。

$("a[rel]").live("change", function(){ .... 

并确保它在DOM准备好。

---

您可以尝试并防止默认操作，也许这会干扰您的第一次点击。

$("a[rel]").bind("click", function(event){ 
event.preventDefault(); // <---------^^ 
$(".close_button_change_password").attr('id','change_password_'+$(this).attr('id')); 
$(this).overlay({ 
    // disable this for modal dialog-type of overlays 
    closeOnClick: true, 
    mask: { 
     color: '#fff', 
     loadSpeed: 200, 
     opacity: 0.8 
    } 
    }); 
}); 

Answer 2

首先，用$（document）.ready（{}）语句嵌入代码。它确保只有在所有html语法都被浏览器解析后，你的dom才会受到代码的影响。

Answer 3

尝试

$("a[rel]").click(function(){alert($(this).attr("id"));}); 

，看看是否有一些错误的HTML代码。那么您可以在顺序添加其他的语句来调试你的js代码

Answer 4

来源：http://flowplayer.org/tools/overlay/index.html

// select one or more elements to be overlay triggers

设置覆盖到HTML的点击属性可能是多余的。基于上述情况，我认为叠加层在点击时已经被激活。