0

我正在使用一个 jQuery 工具提示插件，它需要使用 jQuery 克隆功能来填充自动生成的工具提示。对于我正在处理的项目，我无法控制工具提示何时启动，也没有可用的回调，因此我使用 jQuery .on('mouseenter') 来初始化我的事件。

我在初始化函数中放置的任何东西都有效，但我的点击事件不会触发。根据我的阅读，如果定义了 el ，那么标准事件（点击）应该会自动绑定，但这并没有发生，据我所知，这应该可以正常工作。

javascript:

Lot = Backbone.View.extend({
    initialize: function(){
        this.wrapper = $(this.$el).find('.childDiv');
        $(this.$el).css('background-color', 'blue');
        console.log('init');
    },
    events: {
      'click .showChild': 'showfunction'
    },
    showfunction:function(e){
         this.wrapper.slideToggle('fast');   
    }
});

//gives the auto generated tooltip a class, otherwise it would be classless
$.balloon.defaults.classname = "balloon";

//tooltip needs content passed in, the tooltip creator recommends using clone
$('#showParent')
   .balloon({contents: $('.tooltip-content').clone(), position: "bottom right" });

// this may look redundant, but I do not have access to the initialize function
$('#showParent').on('mouseenter', function() {
    console.log('mouse enter');
    lots = new Lot({el: $('.balloon .tooltip-content')});
});

HTML：

<button id="showParent">Hover</button>
<div id="wrapper">
    <div class="parentDiv tooltip-content">
        <h1> Some text to test parent</h1>
        <button class="showChild">Click</button>
        <div class="childDiv">
            <h2> here is a child div</h2>
        </div>
    </div>
</div>

这是一个小提琴：http: //jsfiddle.net/KFkjZ/

任何关于为什么事件可能不具有约束力的现场都表示赞赏

4

1 回答 1

0

这是因为balloonjquery 插件使用克隆并body在第一次显示时将其附加到 HTML 中。这会破坏您Lot视图的事件处理程序（因为这意味着 Backbone 附加事件处理程序的范围不再相关）。

打破封装的一种选择是附加一个文档级别的事件，以您想要的方式处理点击：

$(document).on('click', '.showChild', function (e) {
    console.log('clicked');
    $(this).slideToggle('fast');    
});
于 2013-04-10T20:16:07.707 回答