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中，标签是驱动点击的因素，因此必须将click事件附加到标签上！

另外，输入和标签上不能有相同的类。 为了使其在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>";
}

然后它可以正常工作。

Answer 2

您可以使用最快的id选择器，并使用.live()绑定click事件，因为您是在运行时生成元素的。

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

Answer 3

我会用：

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