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>

有人知道我该如何解决这个问题吗？非常感谢您提供的任何帮助。

- bumfank

---

有什么问题吗？可能是你只在点击时启动了叠加层吗？ - sdleihssirhc

第一眼看到后：！重要！ 你不能给ID赋予数字值，比如:id="1"。请使用字母作为第一个字符：id="a1"。 - Roko C. Buljan

根据HTML 4.01规范，您不能以数字开头作为id属性。请参见此处。 - Donut

我们并没有说它会这样做，只是在讨论“ID”验证。 - Roko C. Buljan

我曾经使用一个旧的覆盖层jQuery插件也遇到了同样的问题。它本来是可以工作的，但实际上只是显示了覆盖层然后立即隐藏了它。你正在使用哪个覆盖层插件？ - andyb

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

- Anil

---

直播没有解决我的问题。 - bumfank

Answer 2

尝试

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

检查您的HTML代码是否存在问题，然后可以添加其他语句以调试您的JS代码。

- Frenchi In LA

Answer 3

首先，使用$(document).ready({})语句嵌入您的代码。这可以确保您的DOM仅在浏览器解析所有HTML语法后才受到代码的影响。

- Filip Górny

Answer 4

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

// 选择一个或多个元素作为覆盖触发器

将覆盖设置为HTML的点击属性可能是多余的。基于上述内容，我会认为覆盖已经在点击时被激活。

- mowwwalker