时间戳

首页 > 解决方案 > 在 jQuery 中更改提交按钮的值不起作用

jquery - 在 jQuery 中更改提交按钮的值不起作用

问题描述

我想用 jQuery 1.4.5 更改提交按钮的值（显示的文本）：

$('.filter_watch').change(function() {
      $('#filter_submit').val("New text");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<select name="brand" class="filter_watch">
  <option>change</option>
  <option>me</option>
</select>

<input id="filter_submit" type="submit" value="Suchen" data-theme="b">

我也试过：

$('#filter_submit').prop("value", "New text");

更改函数在记录事件时触发，但按钮文本不会更改。我尝试了一些在 SO 上发现的变体，但没有一个有任何效果。

问题似乎是，提交按钮的值正在改变，但由于 jQuery 移动，其上的文本设置在 div 内。

渲染和更改事件后，按钮如下所示：

<div class="ui-btn ui-input-btn ui-btn-b ui-corner-all ui-shadow">
   Suchen
   <input id="filter_submit" type="submit" value="New text" data-theme="b">
</div>

这可能是什么原因，我该如何更改该值？

标签： jquery

解决方案

这里的问题是jquery mobile正在将您的按钮更改为“更适合移动设备的外观” - 通过将其包装在 div 中。

如此处断言：https ://stackoverflow.com/a/23071466/2181514

Jquery Mobile 在页面加载时转换表单输入（除其他外），使其成为移动友好版本。通常这是需要的，因为使用它的 jquery 移动版本更容易单击按钮。如果您不希望这样做，请将该data-role="none"属性添加到您的提交输入中。

或者，您可以使用 jquery 通过查找来更新文本.contents()节点.nodeType==3：

$('.filter_watch').change(function() {
  $('#filter_submit').val("New text");
  var t = $('#filter_submit').parent().contents().filter(function() {
    return this.nodeType === 3
  });
  for (var i = 0; i < t.length; ++i) {
    if (t[i].data.replace(/[\n\t]/g, "").trim() !== "")
      t[i].data = "New text";
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<select name="brand" class="filter_watch">
  <option>change</option>
  <option>me</option>
</select>

<div>
  Suchen
  <input id="filter_submit" type="submit" value="Suchen">
</div>

（在片段中删除了 jquery 移动类以显示 div 和按钮文本的更改）

推荐阅读