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.

score 7 · Accepted Answer · edited May 23 '17 at 10:28

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

edited May 23 '17 at 10:28

Community

1
1

answered Mar 29 '14 at 11:47

Julien Le Coupanec

7,742
9
53
67

One question: why I am not able to get the text from the text area in the popover? I tried it this way: `var letterName = $('[name="letterName"]').val();`. I always get an empty value. – user3475602 Mar 29 '14 at 17:08
Try this and tell me: var letterName = $('textarea[name="letterName"]')[1].val(); – Julien Le Coupanec Mar 29 '14 at 18:31
Unfortunately: TypeError: 'undefined' is not a function. Maybe it is because I have more than one text area? Or is this a meteor issue? Merci beaucoup d'avance. – user3475602 Mar 29 '14 at 19:23
Yes, check your chrome debugger, bootstrap takes what is inside #popover-content and put it in a new div.popover (and this for each click). So you get one new textarea each time you click on .newLetter. – Julien Le Coupanec Mar 29 '14 at 19:51
Thank you for your help. The thing is: I have multiple buttons that should show a popover with a text area. Then, I want to process the user input. Do you think this is "possible" with a popover? – user3475602 Mar 30 '14 at 17:01
Yes of course. Just a find a way to target the textarea and get its value. [Check this link](http://getbootstrap.com/javascript/#popovers-usage) and the $().popover(options). Maybe it can help you to fix your issue. – Julien Le Coupanec Mar 30 '14 at 17:52

Bootstrap Popover + Meteor JS click event

1 Answers1