Question

I am clicking on a button to trigger an event, but it is not working…. not sure what is causing it..

<div class="popOverProgressInsideRightDiv">
        <button id="popOverPause" class="btn btn-mini btn-gray btn-right">Pause</button>
    </div>


render : function() {
var compiledTemplate = Handlebars.compile(aTemplate);

$('#popOverPause').on('click', this.handlePausePress);

this.delegateEvents();

},
handlePausePress : function(event) {
alert("here");
}

Answer 1

You didn’t provide enough information but looks like your button is not available in the DOM during the page load and being inserted dynamically at a certain point and in this case you need a delegated event handler like

$(document).on('click', '.popOverProgressInsideRightDiv #popOverPause', this.handlePausePress);

This is just a guess, so not sure whether it’s going to work or not, may be you need to post more code and describe broadly.

Take a look at Direct and delegated events section in jQuery on.