Question

我想使用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 mobile，其上的文本已在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>

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

Answer 1

这里的问题是 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和按钮文本的更改）

Answer 2

我不确定您要完成什么。您是否要专门在jQuery 1.4.5上更改按钮上的文本？

如果是这样-您需要确保按照jQuery website

的说明添加每个脚本

基本上，您需要将其添加到html文件的标头部分：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

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

2 个答案: