Jquery UI CheckBox Button - button and click compatibility issue - ie8

Situation:

I have the following jquery:

addButton();

function addButton(){
    var div = $("#mydiv");
    div.append(addHtml());
    addEvents(div);
}

function addEvents(div){
div.find(".toggleButton").button();
div.find(".toggleButton").click(function(e) {
    alert("test");
});
}

function addHtml(div){
return "<input class=\"toggleButton\" type=\"checkbox\" id=\"id1\" name=\"name1\" /><label for=\"id1\">Yes</label&g开发者_Go百科t;";
}

The checkbox turns into a button, but does not signal the alert on click. Why does the button part work but not the click part???

Update: This works in firefox but not in ie-8. Unfortunately, I need it work in ie-8.

Update 2: If I comment out the .button call the click part works in ie-8. How do i get both to work together?

Update 3: Actual html generated in firefox:

<input class="toggleButton ui-helper-hidden-accessible" id="id1" name="name1" type="checkbox"><label aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" aria-pressed="false" for="id1"><span class="ui-button-text">Yes</span></label>

Actual html generated in IE-8:

<INPUT id=id1 class="toggleButton ui-helper-hidden-accessible" type=checkbox name=name1 jQuery1294922695438="218"><LABEL aria-disabled=false class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role=button aria-pressed=false for=id1 jQuery1294922695438="223"><SPAN class=ui-button-text jQuery1294922695438="225">Yes</SPAN></LABEL>

The issue is with IE-8's decision on what activates the click. In IE-8 the label is what drives the click, so you must attach the click event to the label!

Also, you cannot have the same class on both the input and the label; for it to work properly in both ie-8 and firefox you must do this:

function addEvents(div){
div.find(".toggleButtonInput").button();
div.find(".toggleButtonLabel").click(function(e) {
    alert("test");
});
}

function addHtml(div){
return "<input class=\"toggleButtonInput\" type=\"checkbox\" id=\"id1\" name=\"name1\" /><label class=\"toggleButtonLabel\" for=\"id1\">Yes</label>";
}

And then it works properly.

You can use an id selector which will be the fastest and use .live() to bind the click event since you are generating element at the runtime.

$("#id1").live("click", function(){
    alert("clicked");
});

I would use:

$(".toggleButton", div).click(function(e) {
    alert("test");
});