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(バックボーンにアタッチされたイベント ハンドラーのスコープが関連しなくなるため)。

カプセル化を破る 1 つのオプションは、ドキュメント レベルのイベントを添付して、希望する方法でクリックを処理することです。

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