0

私の目標は、どこにアンカータグを付けhref="#share"て、このボタンを追加してTwitterのブートストラップポップオーバーに変えることです。私はこれを機能させています。これを複雑にしているのは、html をドキュメントに追加し、クローンを試してみ.clone(true)たのですが、何らかの理由でイベントが追跡されないことです。

以下に例を示します: (画像の上で「共有」ボタンをクリックします): http://reggi.myshopify.com/products/change-it-tee

より具体的な問題は、ソーシャル アイコンをクリックしても何も起こらないことです。

これが以下のコードの要点です。これは私が持っているrequireモジュールで、DOMのどこにでも何でも取り、href="#share"このボタンを追加してポップオーバーに変えます。

define(["jquery", "jquery-bootstrap", "addthis"], function($, jb, at){

    var share = function(){

        var html = '<!-- AddThis Button BEGIN -->'+
            '<div class="addthis_toolbox addthis_floating_style addthis_32x32_style hide">'+
            '<a class="addthis_button_facebook"></a>'+
            '<a class="addthis_button_twitter"></a>'+
            '<a class="addthis_button_pinterest_share"></a>'+
            '<a class="addthis_button_tumblr"></a>'+
            '<a class="addthis_button_thefancy"></a>'+
            '<a class="addthis_button_compact"></a>'+
            '</div>'+
            '<!-- AddThis Button END -->';

        var template = '<div class="popover fade top in" id="share">'+
            '<div class="arrow"></div>'+
            '<div class="popover-content"></div>'+
            '</div>';

        var isVisible = false;
        var clickedAway = true;

        $("body").append(html);

        var ignite = function(){
            var script = document.createElement( 'script' );
            script.type = 'text/javascript';
            script.src = 'http://s7.addthis.com/js/300/addthis_widget.js#pubid=holstee';
            $("head").append(script);
            console.log("ignition");
        };

        $('[href="#share"]')
            .show()
            .popover({
                content: function(){
                    return $(".addthis_toolbox").clone().removeClass("hide");
                },
                html: true, 
                placement: "top",
                template: template,
                trigger: "manual"
            }).click(function(event){
                event.preventDefault();
                var toggle = ($(this).data('toggle') == undefined) ? true : $(this).data('toggle');
                clickedAway = false;
                if(toggle){
                    $(this).popover("show");
                    isVisible = true;
                    ignite();
                }else{
                    $(this).popover("hide");
                    isVisible = false;
                }
                $(this).data('toggle', !toggle);
            });
        /*
        $(document).click(function(e) {
            if(isVisible & clickedAway){
                $('[href="#share"]').popover('hide');
                isVisible = clickedAway = false
            }else{
                clickedAway = true
            }
        });
        */

    }



    return share;

});
4

2 に答える 2