javascript - Jquery UI CheckBox Button - 按钮和点击兼容性问题 - ie8

Question

情况:

我有以下 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>";
}

复选框变为按钮，但不会在单击时发出警报信号。为什么按钮部分有效而点击部分无效？？？

更新:这在 firefox 中有效，但在 ie-8 中无效。不幸的是，我需要它在 ie-8 中工作。

更新 2:如果我注释掉 .button 调用，则点击部分在 ie-8 中有效。如何让两者协同工作？

更新 3:在 firefox 中生成的实际 html:

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

在 IE-8 中生成的实际 html:

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

Answer 1

问题在于 IE-8 对激活点击的决定。在 IE-8 中，标签驱动点击，因此您必须将点击事件附加到标签!

此外，您不能在输入和标签上使用相同的类；为了使其在 ie-8 和 firefox 中都能正常工作，您必须这样做:

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

然后它就正常工作了。