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

Question

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

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>

Just to make sure, the HTML is escaped because it's for an echo or something (i.e. the browser doesn't see the \") — Jonathon Bolster
– Jonathon Bolster, Commented Jan 13, 2011 at 12:10
@john - sorry, it's escaped because i'm adding ti via javascript. It's actually a string in javascript that i'm appending. — kralco626
– kralco626, Commented Jan 13, 2011 at 12:12
@john - div is a jquery object. It's some continer, generally a div, that the input was just added to. Then the events are added. Maybe I should post a little more code... — kralco626
– kralco626, Commented Jan 13, 2011 at 12:13
@everyone - updated with a little more code to give a better picture of what i'm doing. — kralco626
– kralco626, Commented Jan 13, 2011 at 12:19

kralco626 · Accepted Answer · 2012-06-27 16:17:32Z

4

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.

edited Jun 27, 2012 at 16:17

answered Jan 13, 2011 at 13:26

kralco626

8,69641 gold badges116 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kralco626 Over a year ago

Of course this makes it rather a pain to get to the checked attribute inside of the click function.

rahul · Accepted Answer · 2011-01-13 12:19:31Z

1

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

answered Jan 13, 2011 at 12:19

rahul

188k50 gold badges239 silver badges266 bronze badges

4 Comments

kralco626 Over a year ago

I tried to use delegate, but that did not work either. So I went to this to sorta debug the problem. However this does not work either. Clearly the above code should work... If the button part works the click part should work...?

rahul Over a year ago

Try inspecting in firebug what is the exact HTML generated after applying .button().

kralco626 Over a year ago

<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>

in firefox

kralco626 Over a year ago

<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>

in ie=8

Vladimir Kocjancic · Accepted Answer · 2011-01-13 12:14:18Z

0

I would use:

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

answered Jan 13, 2011 at 12:14

Vladimir Kocjancic

1,8404 gold badges23 silver badges37 bronze badges

12 Comments

kralco626 Over a year ago

No messages whatsoever in ie developer tools

Vladimir Kocjancic Over a year ago

Just for test, try run it in Firefox

Vladimir Kocjancic Over a year ago

Here is your porblem... var div = $("mydiv"); It should be var div = $("#mydiv");

kralco626 Over a year ago

I hate my life... lol it works in firefox. However it must work in ie. In the end it working in firefox is irrelevant because the clients will only use ie-8

kralco626 Over a year ago

@vladimir - that was a typo into the question.

|

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

4 Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related