Backbone event not firing after webuipopover

Question

When I click the "Add" button on webui popover, then the alert does not fire. Why is the event not triggering?

var AppView = Backbone.View.extend({
    events: {
        'click #btnAdd': function() {
            alert('Add');
        }
    },
    initialize: function() {
        _.bindAll(this, 'render');
        this.render();
    },
    render: function() {
        var template = _.template($('#myApp').html());
        this.$el.html(template);
    }
});

var myApp = new AppView({
    el: '#container'
});

$('#showPopup').webuiPopover({
    width: '500px',
    height: 'auto',
    padding: true,
    trigger: 'click',
    closeable: true,
    delay: 200,
    placement: 'right-bottom',
    animation: 'sticky',
    dismissable: true,
    onShow: function() {
        console.log(this);
    },
    content: '<div>' + 
        Popop + '<br /><input type="button" value="Add" id="btnAdd"/></div>'
});

<div>
    <script type="text/template" id="myApp">
        <a href="#" id="showPopup">Show popup</a>
    </script>

    <div id="container">

    </div>
</div>

Is not triggered because is not in template, #btnAdd Button is created dinamically by Popover, that's why the event is not binded. — elporfirio, Jan 22 '18 at 19:43
`_.bindAll` is unnecessary if you're using a recent version of Backbone. — Emile Bergeron, Jan 22 '18 at 19:59

Emile Bergeron · Accepted Answer · 2018-01-22T20:51:06.407

webui-popover has a container option where you can tell the popover to be inserted inside the Backbone view's $el root element.

It is inserted in the document.body by default.

Don't use global jQuery event listeners for this, prefer scoping to the view and whenever possible, wrapping plugins within the view itself.

Also, check how to use the _.template function.

var AppView = Backbone.View.extend({
  // Parse the template once.
  template: _.template($('#myApp').html()),
  events: {
    'click #btnAdd': 'onClick',
  },

  render: function() {
    // It's a function, don't forget to call it: 'this.template()'
    this.$el.html(this.template());
    
    // Initialize the plugin inside the view's render
    this.$('#showPopup').webuiPopover({
      container: this.$el, // use the container option
      trigger: 'click',
      closeable: true,
      placement: 'right-bottom',
      content: '<div>test<br /><input type="button" value="Add" id="btnAdd"/></div>'
    });
    // Returning 'this' in the render function is a Backbone convention.
    return this;
  },
  onClick: function(e) {
    console.log('Add click event');
  }
});

// 'render' should be called outside the view.
var myApp = new AppView({
  el: '#container'
}).render();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.css" />
<div>
  <script type="text/template" id="myApp">
    <a href="#" id="showPopup">Show popup</a>
  </script>

  <div id="container">

  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

score -1 · Answer 2 · answered Jan 22 '18 at 19:49

The fast and EZ answer is attach event to body instead template.

$('body').on('click', '#btnAdd', function(){
    alert('hey buddy');
});

More info in: http://api.jquery.com/on/

Complex time:

Add template for popup as template child.
Reference that child into settings of popup.

Based on question:

How to bind events on dynamic generated buttons in backbone?

Backbone event not firing after webuipopover

2 Answers2