How to delay .live() until UI has updated?

Question

I am using jQuery and jQuery UI and i am trying to read a checkbox state through the addition of the "aria-pressed" property that jQuery UI Button toggle between false and true.

$('.slideButton').live('click', function() {

alert($(this).attr('aria-pressed'));

});

This code however seems to read the aria-pressed before jQuery UI has updated aria-pressed. So i unreliable values. Can i schedule it to execute after the UI has updated or can i make it wait?

Live example here!

Answer 1

Can't you add a listener to the actual checkbox behind the label or span?

$("#days_list li div div div input[type='checkbox']").change(function(){
     alert("Someone just clicked checkbox with id"+$(this).attr("id"));
});

This should work since, once you click the label, you change the value in the checkbox.

---

Alright, I've composed a live example for you that demonstrates the general idea of how it works, and how you retrieve the status of the checkbox.

$("#checkbox_container input").change(function(){
    if($(this).is(":checked")) alert("Checked!");
    else alert("Unchecked!");
});

In your case, since the checkbox is added dynamically by JQuery you have to use the live event, but it is basically the same thing

$("#checkbox_container input").live("changed"....

Here's an example with some additional scripting and checking, mostly for demonstrative purposes.

Answer 2

You can use a callback to execute the alert($(this).attr('aria-pressed')); after the toggle has completed.

$('.slidebutton').toggle(1000, function(){

    alert($(this).attr('aria-pressed'));
});

I'm not too sure if your using .toggle() or not but you would need to use a callback either way to ensure sequential execution.