无法使用 jQuery 更改按钮的 html

Question

我只是想更改按钮内的 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')" 只是创建了一个 "deep" 副本，与真正的 html-element.

没有任何实际联系

所有这些都写在 Javascript 的 Backbone 视图中。

编辑：这是用于包含按钮

的 header 的 html-template

<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>

Answer 1

It's 为我工作。

HTML

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

JS

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

可能是，您使用 input 标签和 type="button"，在这种情况下您应该使用这个。

HTML

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

JS

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

或

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

Answer 2

很容易修复

$("#listButton").click(function(){
    
    alert("This button works");
   $(this).html('test') 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="listButton"> The Button
</button>

Answer 3

Stryner 的回答很准确。我只有 id="list-button" 一次，但出于某种原因，我两次添加了包含该按钮的模板。虽然看不到另一个。更改 html 更改了第一个，因此更改在上面的那个上不可见。

无法使用 jQuery 更改按钮的 html

Can't change html of button with jQuery

javascript

jquery

backbone.js

backbone-views