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.

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.

• javascript
• twitter-bootstrap
• meteor

Share Improve this question Follow edited Dec 15, 2014 at 21:11 Zanon 30.9k2121 gold badges118118 silver badges126126 bronze badges asked Mar 29, 2014 at 11:27 user3475602user3475602 1,21722 gold badges2222 silver badges4343 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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');
    });
}