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元素的实际连接。

所有这些都是在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>

Answer 1

非常简单的修复

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

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');

无法使用jQuery

3 个答案: