jQuery event not firing until second click?

Question

I have the following jQuery code. The first time I click a link, nothing happens; however, upon clicking the link the second time, the expected action occurs.

$("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
      }
   });
});

Here's my HTML:

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

Does anyone know how I might go about fixing this problem? Thanks in advance for any assistance.

Answer 1

Try

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

or you could try.., but I dont think this would solve it.

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

And make sure its in DOM ready.

---

You could try and prevent the default action, maybe this is interfering with your first click.

 $("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

First of all, embed your code with $(document).ready({}) statement. It makes sure you'r dom will be affected with code only after all html syntax is parsed by browser.

Answer 3

Try

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

to see if there is something wrong with your HTML code. then you can add other statement in order to debug your js code

Answer 4

From: http://flowplayer.org/tools/overlay/index.html

// select one or more elements to be overlay triggers

Setting the overlay to the click attribute of HTML might be redundant. Based on the above, I would assume that the overlay is already activated on click.