Question

当我点击＆＃34;添加＆＃34; webui popover上的按钮，然后警报不会触发。为什么事件没有触发？

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

    <div id="container">

    </div>
</div>

true

Answer 1

webui-popover有一个container option，你可以告诉popover插入Backbone视图的$el根元素。

默认情况下会插入document.body。

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

另外，请查看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>

Answer 2

快速和EZ答案是将事件附加到身体而不是模板。

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

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

复杂时间：

为弹出窗口添加模板作为模板子项。
将该子项引用到弹出窗口的设置中。

基于问题：

How to bind events on dynamic generated buttons in backbone?

webuipopover后没有触发的骨干事件

2 个答案: