在IE中奇怪的jQuery行爲

我有一個span元素替代了一個複選框，所以我可以設計它。我也有一個標籤標籤;點擊時它應該激發跨度的點擊事件，就好像用戶剛剛點擊了span元素一樣。換句話說 - 我模仿標籤/複選框與標籤/跨度的關係。在IE中奇怪的jQuery行爲

此功能在Firefox和Chrome中按預期工作，但不包含IE。在IE 7和8，點擊標籤，什麼也不做，似乎產生源一些奇怪的屬性：

<span class="checkbox" id="Vechicle-1" jQuery15105041923284548672="2"/> 
<label class="large text-left" for="Vechicle-1" jQuery15105041923284548672="24">

在IE 9我沒有看到jQuery的字符串追加和2x點擊該標籤將火關跨度的點擊事件。

$('.checkbox').click(function() { 
    $(this).toggleClass('checked'); 

    if ($(this).hasClass('checked')) { 
     $('#checkbox-' + $(this).attr('id')).attr('checked', 'checked'); 
    } else { 
     $('#checkbox-' + $(this).attr('id')).removeAttr('checked'); 
    } 
}); 

$('label').click(function() { 
    $('#' + $(this).attr('for')).click(); 
});

任何想法是什麼導致這種行爲？

來源

2011-08-28 Mike

發佈您正在使用的代碼*生成*標籤 - 它看起來像是問題所在（特別是，它看起來像您正在生成複選框的ID並放置在他們的空間）。 – Malvolio

你使用的是最新版本的jQuery？ –

你使用的是一些jQuery插件或擴展？如果是這樣，請詳細說明。 –

也許click事件向上冒泡和觸發你可能有的其他代碼，嘗試通過更改代碼來防止它：

$('.checkbox').click(function (event) { 
    event.preventDefault(); 
    $(this).toggleClass('checked'); 
    //......

和其他點擊處理程序相同。

編輯：發現此行爲的根源。事實證明，IE瀏覽器的「let」標籤也會影響非表單元素，包括<span>，這意味着點擊標籤元素將觸發標識爲for屬性的元素的元素的click事件 - 無論元素類型是什麼。按照預期，Chrome（也可能是Firefox）會讓它只觸發表單元素，如複選框。

這個證明可以發現here只需瀏覽IE瀏覽器（甚至9），並看到標籤被點擊時，即使jQuery線被評論，「spaned」被點擊。

所有這一切都歸結爲一個有趣的結論：點擊標籤導致跨度被點擊兩次 - 一次由瀏覽器和另一個由jQuery代碼，導致它切換兩次狀態。

來源

2011-08-28 17:08:59

就是這樣！謝謝。雖然我不知道爲什麼會出現這種情況... – Mike

而jQuery字符串仍然在元素中，但它的工作原理... – Mike

此外，我只需將preventDefault添加到標籤。 – Mike

另一種選擇是把外部函數中的$('.checkbox').click代碼，那麼這可以被稱爲當用戶點擊任何複選框或標籤：

function checkboxClick(checkboxElement){ 
    checkboxElement.toggleClass('checked'); 

    if (checkboxElement.hasClass('checked')) { 
     $('#checkbox-' + checkboxElement.attr('id')).attr('checked', 'checked'); 
    } else { 
     $('#checkbox-' + checkboxElement.attr('id')).removeAttr('checked'); 
    } 

} 

$('.checkbox').click(function() { 
    checkboxClick($(this));    
}); 

$('label').click(function() { 
    checkboxClick($('#' + $(this).attr('for'))); 
});

來源

2011-08-28 16:58:03 maxedison

我用你的方法來代替。它不能解決我的問題，但感謝您的答覆。 – Mike

而不是得到for attrubute並找到元素。您可以嘗試使用prev方法，該方法將爲您提供span元素以及調用click方法。

$('label').click(function() { 
    $(this).prev().click(); 
});

來源

2011-08-28 17:09:40 ShankarSangoli

IE犯規行爲很好，當您嘗試設置屬性通過JavaScript檢查，這個錯誤一直咬在我的屁股。最簡單的方式是我能解決這個問題是完全去除INOUT元素和與檢查=屬性新的輸入元素替換爲「選中」設置和工程..

var $checkedItem= $(selectorForCheckedBox) 


$checkedItem.clone().addAttr("checked","checked").insertAfter('span.checkbox'); 
$checkedItem.detach(); //$checkedItem.remove() use it appropriately.

希望這有助於。 lemme knoe，如果你找到一個更容易修復..評論將有助於//

來源

2011-08-28 17:17:09 Baz1nga

在IE中奇怪的jQuery行爲

回答

相關問題