Can't change html of button with jQuery

Question

I'm simply trying to change the html inside a button. I have done it before but there's either something wrong with my version of jQuery or I'm missing something. Either way, this is very strange as it works in many other places in the application.

When I click a button an event i fired, the event works fine, but I'm also trying to change the appearance of the button, which, as a stated before works everywere in my application but here.

It's not a lot of code:

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

However here is the strangest part, when I do this:

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

Both console.log() shows the button as if the html was changed, even before the one before I change the html. And also, no change on the visible button. Has anyone experienced something like this before, am I just missing something very obvious or is there something very wrong here? Also, I only have one single #list-button in my entire project. It's as if in this particular file, "var listButton = $('#list-button')" just creates a "deep" copy with no actual connection to the real html-element.

All of this is written in Javascript in a Backbone View.

EDIT: This is the html-template used for the header containing the button

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

With Backbone and jQuery I just add this piece of html (see EDIT) to the page, and it shows up fine. Also the event fires as it should when I press the button. — Sebastian, Jul 30 '15 at 18:06
That's how work the console, use `outerHTML` and see the difference: `console.log(listButton.get(0).outerHTML);` http://stackoverflow.com/questions/17320181/console-log-showing-only-the-updated-version-of-the-object-printed — A. Wolff, Jul 30 '15 at 18:07
It sounds like there are two or more elements on the page with that ID. What does `$("[id='list-button']").length` return? Edit: Oops. I missed that you specified in question that there's only one. — Stryner, Jul 30 '15 at 18:07
Ahh, thank you! Didn't know you could do that, it returned 2. I looked through the code and saw that I add the template two times, I must be getting the first one with that `$('#list-item')`. Don't know why I did that, just a silly mistake. — Sebastian, Jul 30 '15 at 18:12

score 2 · Answer 1 · answered Jul 30 '15 at 18:09

Pretty easy fix

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

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

Stryner was spot on with his answer. I only had id="list-button" once but for some reason I added the template containing that button two times. Could not see the other one though. Changing the html changed the first one so the change was not visible on the one on top of that.

edited May 23 '17 at 11:58

Community

1
1

answered Jul 30 '15 at 18:21

Sebastian

333
1
3
13

score 0 · Answer 3 · answered Jul 30 '15 at 18:08

It's work for me.

HTML

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

JS

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

May be, you use an input tag with type="button", in this situation you should use this.

HTML

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

JS

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

or

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

Can't change html of button with jQuery

3 Answers3