Jquery didn't work with !text plugin require js with backbone

Question

I created a template file home.html for my home view with a form in it :

<form class="adform">
   <input type="button" id="addcompareitem" class="addcompareitem" value="Add compare item" />
</form>

This is some code of my home view :

var HomeView = Backbone.View.extend({
  initialize: function() {
     item1.disableCompareBtn();
  },
  render : function(){
     this.$el.html(homeTemplate);
  }
});
return HomeView;

Here's disableCompareBtn method :

this.disableCompareBtn = function(){
    if(compareitems == null || compareitems.length < 2){
        $('#addcompareitem').prop('disabled', true);
        console.log(1);
    }

};

Problem : when home view initialize, the button still enable, but the console.log(1) is working.

Any idea what caused this. Thanks.

Answer 1

Looks like you're running the disable before the HTML even exists. My bet is that if you console.log($('#addcompareitem')) you'll get no elements returned to you. Instead, try disabling the buttons immediately after running this.$el.html(homeTemplate) .

Just for clarity's sake, initialize is called when something is constructed, and then you call render on the constructed object.