Backbone webuipopover 后事件未触发

Question

当我单击 webui popover 上的 "Add" 按钮时，警报不会触发。为什么事件没有触发？

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>

Answer 1

快速简便的答案是将事件附加到正文而不是模板。

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

更多信息见：http://api.jquery.com/on/

复杂时间：

为弹出窗口添加模板作为模板child。
将 child 引用到弹出设置中。

基于问题：

How to bind events on dynamic generated buttons in backbone?

Answer 2

webui-popover 有一个 container option，您可以在其中告诉弹出框插入到 Backbone 视图的 $el 根元素中。

默认插入document.body

不要为此使用全局 jQuery 事件侦听器，更喜欢将范围限定到视图，并尽可能将插件包装在视图本身中。

此外，检查如何。

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>

Backbone webuipopover 后事件未触发

Backbone event not firing after webuipopover

javascript

jquery

backbone.js