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.

What's the problem? Could it be that you're only initiating the overlay on click? — sdleihssirhc, Aug 16 '11 at 19:36
After a first look: **!important!** you cannot give `ID`'s numeric values! like : `id="1"` Use a letter for the first character: `id="a1"` — Roko C. Buljan, Aug 16 '11 at 19:36
@roXon - I'm pretty sure you can. Javascript variables can't start with numbers, but the id is an HTML attribute. — mowwwalker, Aug 16 '11 at 19:40
@roXon: in [HTML5](http://www.w3.org/TR/html5/elements.html#the-id-attribute) you can. — andyb, Aug 16 '11 at 19:40
@user828584 According to the HTML 4.01 spec you cannot begin an `id` attribute with a digit. See [here](http://www.w3.org/TR/html401/types.html#type-name). — Donut, Aug 16 '11 at 19:42
@user828584 in HTML < 5 an `id` starting with a non-alphabetic character is invalid — andyb, Aug 16 '11 at 19:42
@user828584 http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Roko C. Buljan, Aug 16 '11 at 19:49
We did'nt say it will. Just discussing the 'ID' validations. — Roko C. Buljan, Aug 16 '11 at 19:50
So : if you are using XHTML = don't use numbers for you first ID character! @user828584 — Roko C. Buljan, Aug 16 '11 at 19:52
http://jsfiddle.net/roXon/6F7mJ/1/ Now ask us why it is not good (look at the CSS) — Roko C. Buljan, Aug 16 '11 at 19:54
I had the same thing with an old overlay jQuery plugin. It _was_ working but was actually showing the overlay and then hiding it immediately again. Which overlay plugin are you using? — andyb, Aug 16 '11 at 19:56

Anil · Answer 1 · 2011-08-16T20:04:50.313

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

live didnt repair my problem. – bumfank Aug 16 '11 at 19:47 — bumfank, Aug 16 '11 at 19:47

score 0 · Answer 2 · answered Aug 16 '11 at 19:42

0

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.

answered Aug 16 '11 at 19:42

Filip Górny

1,749
16
24

score 0 · Answer 3 · answered Aug 16 '11 at 19:46

0

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

answered Aug 16 '11 at 19:46

Frenchi In LA

3,139
3
25
41

score 0 · Answer 4 · answered Aug 16 '11 at 19:58

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.

jQuery event not firing until second click?

4 Answers4