javascript - 无法使用 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')”只是创建了一个“深层”副本，与真正的 html 元素没有实际联系。

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

编辑:这是用于包含按钮的 header 的 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>

Answer 1

很容易修复

$("#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>