Search code examples
javascriptjquerybackbone.jsbackbone-views

Can't change html of button with jQuery

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

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