更改使用jQuery的跨瀏覽器支持

Question

問題型

下面的腳本做什麼我需要，除了IE8，它刪除按鈕，而不與任何東西代替它測試的所有瀏覽器。

背景

我已經工作的方法，以取代使用jQuery圖像類型輸入提交類型的輸入。

首先，我有這個下面與FF和WebKit工作原理：

 marker = jQuery('<span class="marker"></span>').insertBefore('input#SearchButton'); 
     jQuery('input#SearchButton').detach().attr('type', 'image').attr('src',theme_folder+'/style/images/search_button.png').insertAfter(marker); 
     marker.remove(); 

但這未能在所有6+版本，如果IE（它消除了按鈕，但不與圖像替換），所以我開發了IE瀏覽器下面的腳本：

 marker = jQuery('<span class="marker"></span>').insertBefore('input#SearchButton'); 
     new_search = jQuery('<input id="SearchButton" value="Search" name="Searchbutton" type="image" src="'+theme_folder+'/style/images/search_button.png'+'" />') 

     jQuery(new_search).insertAfter('input#SearchButton'); 
     jQuery('input#SearchButton').remove(); 
     marker.remove(); 

我使用的HTML標記條件來過濾流量到相應的腳本流，所以使整個事情是這樣的：

<!--[if IE]> 
    <script> 

     marker = jQuery('<span class="marker"></span>').insertBefore('input#SearchButton'); 
     new_search = jQuery('<input id="SearchButton" value="Search" name="Searchbutton" type="image" src="'+theme_folder+'/style/images/search_button.png'+'" />') 

     jQuery(new_search).insertAfter('input#SearchButton'); 
     jQuery('input#SearchButton').remove(); 
     marker.remove(); 

    </script> 
<![endif]--> 

<![if !IE]> 
    <script> 

     marker = jQuery('<span class="marker"></span>').insertBefore('input#SearchButton'); 
     jQuery('input#SearchButton').detach().attr('type', 'image').attr('src',theme_folder+'/style/images/search_button.png').insertAfter(marker); 
     marker.remove(); 

    </script> 
<![endif]> 

Answer 1

在IE上，input元素的type屬性爲一次寫入。一旦你第一次設置它，你就無法改變它。 （有一個在attr documentation這個警告。）

你的唯一真正的選擇是兼容IE是實際用一個新的具有相同id更換的元素。顯然這對事件處理程序有影響（您附加到舊元素的任何內容都不會附加到新元素），因此您可能需要使用delegate（或全局版本live），而不是直接將處理程序附加到有問題的元素。

更新：啊，我看你已經寫了一些代碼來做到這一點。該代碼的問題在於，您臨時創建一個無效文檔（它有兩個不同的元素，它們具有相同的id），然後通過該重複的id查找該元素。這將是很好，如果你只是搶元素提前：

// Get the old search button 
old_search = jQuery('input#SearchButton'); 

// Create the new search button 
new_search = jQuery('<input id="SearchButton" value="Search" name="Searchbutton" type="image" src="'+theme_folder+'/style/images/search_button.png'+'" />') 

// Insert the new one after the old (temporarily creates an invalid document) 
jQuery(new_search).insertAfter(old_search); 

// Now remove the old one 
old_search.remove(); 

（你並不需要爲這個標記，所以我從上面取下它。）

但你可能想看看使用replaceWith代替：

jQuery('input#SearchButton').replaceWith(
    '<input id="SearchButton" value="Search" name="Searchbutton" type="image" src="'+theme_folder+'/style/images/search_button.png'+'" />' 
); 

這裏有一個簡單的replaceWith例子（還展示了delegate）：

HTML：

<div id='container'> 
    <p>This button is in the container, and so clicks 
    on it will convert it back and forth between 
    <code>input type='button'</code> and 
    <code>input type='image'</code>.</p> 
    <input type='button' value='Click Me'> 
</div> 
<div> 
    <p>This button is <strong>not</strong> in the 
    container, and so clicks on it aren't processed.</p> 
    <input type='button' value='Click Me'> 
</div> 

的JavaScript：

$('#container').delegate('input', 'click', function() { 
    if (this.type === "button") { 
    $(this).replaceWith(
     "<input type='image' src='" + imageSrc + "'>" 
    ); 
    } 
    else { 
    $(this).replaceWith(
     "<input type='button' value='Click Me'>" 
    ); 
    } 
}); 

Live copy

按鈕有沒有一個id，但它是如果它完全罰款：

HTML：

<div id='container'> 
    <input type='button' id='theButton' value="Click Me, I'll Change"> 
    <br><input type='button' value="Click Me, I Won't Change"> 
</div> 

的JavaScript：

$('#container').delegate('#theButton', 'click', function() { 
    if (this.type === "button") { 
    $(this).replaceWith(
     '<input id="theButton" type="image" src="' + imageSrc + '">' 
    ); 
    } 
    else { 
    $(this).replaceWith(
     '<input id="theButton" type="button" value="Click Me, I\'ll Change">' 
    ); 
    } 
}); 

Live copy

---

題外話：既然你已經更換，支持IE反正元素，我建議你只是有代碼的一個副本，並用它在所有瀏覽器。更換元素並不昂貴，即使是在允許您更改元素的瀏覽器上。

Answer 2

您無法動態更改Internet Explorer中輸入元素的類型。 你必須刪除舊的輸入，並添加一個新的輸入