无法用jQuery更改按钮的html

问题描述

我只是想改变按钮内的html。 我以前做过但是我的jQuery版本有问题或者我错过了什么。 无论哪种方式，这都很奇怪，因为它适用于应用程序中的许多其他位置。

当我点击一个按钮时我发射的事件，事件工作正常，但我也试图改变按钮的外观，正如之前说的那样，我的应用程序中的每一个都在这里工作。

这不是很多代码：

var listButton = $('#list-button');
console.log(listButton); // Shows the correct one, this is the button I want
listButton.html('test') // This does nothing, the appearance doesn't change

然而，当我这样做时，这是最奇怪的部分：

var listButton = $('#list-button');
console.log(listButton.get(0));
listButton.html('test')
console.log(listButton.get(0));

console.log（）都显示按钮，好像html已更改，甚至在我更改html之前。 而且，可见按钮没有变化。 以前有没有人经历过这样的事情，我只是错过了一些非常明显的东西，或者这里有什么不妥之处？ 另外，我在整个项目中只有一个＃list-button。 就好像在这个特定的文件中，“var listButton = $（'＃list-button'）”只是创建一个“深层”副本而没有与真实html元素的实际连接。

所有这些都是在Backbone View中用Javascript编写的。

编辑：这是用于包含按钮的标题的html模板

<div class="item-list-header">
  <button id="select-all-button" class="item-editor-toolbar-button items-header-button">Select all</button>
  <button id="export-button" class="item-editor-toolbar-button items-header-button">Export Selected</button>
  <button id="refresh-button" class="item-editor-toolbar-button items-header-button">Refresh</button>
  <center>
    <button id="list-button" class="item-editor-toolbar-button items-header-button">
      <i class="fa fa-bars" style="margin-right: 10px;"/>List
    </button>
  </center>
</div>

的回答很明显。 我只有一次id="list-button"但由于某种原因我添加了包含该按钮两次的模板。 但是看不到另一个。 更改html更改了第一个，因此更改在顶部的那个上不可见。

对我有用。

HTML

<button id='list-button' type='button'>Add</button>

JS

$("#list-button").html('Save');

可能是，你使用type="button"的input标签，在这种情况下你应该使用它。

HTML

<input type='button' value='Add' id='list-button'>

JS

$("#list-button").prop('value', 'Save');

要么

$("#list-button").attr('value', 'Save');