Can someone tell me what's wrong with my jQuery live method?

Question

I've created this simple time picker app but for some reason this snippet of code isn't working. I had it working (maybe it was my imagination).

I have 4 radio buttons. With each button having a click event attached (using jquery's live method), I show a DIV and hide the other DIVs. I also (i thought i was) adding a plugin's method to the newly shown DIV.

Take a look at the link below and you'll see what I mean. The first DIV works, but subsequent ones don't. What am I missing?

Thanks!

http://jsbin.com/ebige3

Answer 1

There are a bunch of problems with your code. For one thing, there are several textboxes with the id's starttime and endtime, whereas an id should occur only once in the document.

What's causing your problem is the fact that upon the click of any radiobutton, the timepicker will be initialized for all elements matching the $("#starttime, #endtime") selector. That will mean the first div (which is visible), works OK, and the select fields get positioned alright, but for subsequent div's, it is being positioned at a time when the div they're associated with are hidden, and as such, their positions cannot be calculated.

I'd consider changing the code so that your div's have id's called "recur1", "recur2", etc, rather than "daily" and "weekly", and also give al of them a class, "recur". Then you'll be able to remove all your if-statements and just do:

$('.recur').hide();
$('#recur'+recurType).show();

It'll also enable you to do this, which will solve your problem:

$('#recur'+recurType).find("#starttime, #endtime").timePicker({ ... });