jQuery UI的複選框按鈕 - 按鈕，然後單擊兼容性問題 - IE8

現狀：jQuery UI的複選框按鈕 - 按鈕，然後單擊兼容性問題 - IE8

我有以下的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調用，click部分在ie-8中工作。我怎樣才能一起工作？

更新3：在Firefox產生 實際的HTML：在IE-8產生

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

實際的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>

來源

2011-01-13 kralco626

哈哈，我們都在同一時間進行編輯 - 謝謝:) – kralco626 2011-01-13 12:09:28

只是爲了確保HTML被轉義，因爲它是用於回顯或其他東西（即瀏覽器看不到\「） – 2011-01-13 12:10:01

另外：Where 'div'set？ – 2011-01-13 12:10:53

問題出在IE8決定什麼激活點擊。在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>"; 
}

然後它正常工作。

來源

2011-01-13 13:26:29 kralco626

我會使用：

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

來源

2011-01-13 12:14:18

您可以使用最快的id選擇器，並使用.live()綁定click事件，因爲您在運行時生成元素。

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

來源

2011-01-13 12:19:31 rahul

jQuery UI的複選框按鈕 - 按鈕，然後單擊兼容性問題 - IE8

回答

相關問題