Bootstrap Popover + Meteor JS click event

Question

I'm trying to fire a meteor event by clicking on a button inside a bootstrap popover window. However, the event is not getting fired.

Here is my code:

   <button name="newLetter" class="glyphicon glyphicon-plus newLetter" type="button" data-container="body" data-toggle="popover" data-placement="right"></button>
   <div id="popover-content" class="hide">
      <textarea></textarea>
      <button class='glyphicon glyphicon-ok btn btn-success btn-xs addNewLetter'></button>
   </div>

Template.templateName.events({
    'click .newLetter': function(e, t) {
        $(".newLetter").popover({
           html: true,
           title: 'New Letter',
           content: function() {
              return $("#popover-content").html();
           }
       });
    },
    'click .addNewLetter': function(e, t) {
        console.log('test');
    }
});

Any help would be greatly appreciated.

Answer 1

First with your code, this doesn't show the popup on the first click. What you should do:

Template.templateName.rendered = function() {
    $(".newLetter").popover({
        html: true,
        title: 'New Letter',
        content: function() {
            return $("#popover-content").html();
        }
    });
}

If you check with your debugger, you will see that each time you click on the .newLetter button, bootstrap take the content of #popover-content and place it in a new div with a class .popover. If you want to see how to bind an event on dynamically created elements, you should check this answer. (the solution is to use on())

Now, for what is happening, Meteor is binding a click event on .addNewLetter inside #popover-content and not on the dynamically created element .addNewLetter inside the div.popover, that's why it is not working. One workaround I found:

Template.templateName.rendered = function() {
    $(document).on('click', '.addNewLetter', function() {
        console.log('hey');
    });
}