更改使用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中输入元素的类型。 你必须删除旧的输入，并添加一个新的输入