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();

但是如果IE（它删除按钮，但不替换为图像），则所有6个版本都会失败，因此我为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上，type元素的input属性为一次写入。第一次设置后，您无法更改它。（attr documentation中有关于此的警告。）

与IE兼容的唯一真正选择是使用具有相同id的新元素实际替换元素。显然这会对事件处理程序产生影响（任何附加到旧元素的内容都不会附加到新元素上），因此您可能希望使用delegate（或全局版本，{{3}而不是直接将处理程序附加到相关元素。

更新：啊，我看到你写了一些代码来做到这一点。该代码的问题在于您临时创建了一个无效文档（它有两个不同的元素具有相同的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();

（你不需要这个标记，所以我从上面删除了它。）

但您可能希望改为使用live：

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'>"
    );
  }
});

replaceWith

那里的按钮没有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中动态更改输入元素的类型。您必须删除旧输入并添加新输入

使用跨浏览器支持的jQuery更改<input />类型

2 个答案: