Question

我使用POPR Jquery插件来获得一个简单的弹出菜单。虽然脚本运行正常，但我总是需要单击两次才能激活弹出窗口。如何通过一次点击让它工作？

(function($) {

     $.fn.popr = function(options) {

          var set = $.extend( {

               'speed'        : 200,
               'mode'         : 'bottom'

          }, options);

          return this.each(function() {

               var popr_cont = '.popr_container_' + set.mode;
               var popr_show = true;

               $(this).click(function(event)
               {
                    $('.popr_container_top').remove();
                    $('.popr_container_bottom').remove();

                    if (popr_show)
                    {
                         event.stopPropagation();
                         popr_show = false;
                    }
                    else
                    {
                         popr_show = true;
                    }

                    var d_m = set.mode;

                    var id = $j(this).closest('td').siblings(':first-child').text();

                    var but_log     = '<button title="Logs" type="button" id="log" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-info-sign"></span></button>';
                    var but_del     = '<button title="Verwijder Contract" type="button" id="rem" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-remove"></span></button>';
                    var but_edi     = '<button title="Bewerk Contract" type="button" id="edit" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span></button>';
                    var but_verl_nu     = '<button title="Verleng vanaf nu" type="button" id="verlengvanafnu" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-upload"></span></button>';
            var but_verl_eind   = '<button title="Verleng vanaf contract eind" type="button" id="verlengvanafeind" value="'+ id +'" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-ok"></span></button>';

                    var out = '<div class="popr_container_' + d_m + '"><div class="popr_point_' + d_m + '"><div class="popr_content">'+ but_verl_nu + but_verl_eind + but_edi + but_del + but_log +'</div></div></div>';

                    $(this).append(out);

                    var w_t = $(popr_cont).outerWidth();
                    var w_e = $(this).width();
                    var m_l = (w_e / 2) - (w_t / 2);

                    $(popr_cont).css('margin-left', m_l + 'px');
                    $(this).removeAttr('title alt');

                    $(popr_cont).fadeIn(set.speed);
               });

               $('html').click(function()
               {
                    $('.popr_container_top').remove();
                    $('.popr_container_bottom').remove();

                    popr_show = true;
               });                           
          });
     };

})(jQuery);

对不起，我发现我错过了剧本的一小部分内容。

popr用于获取巨大数据网格的选项。

我用来激活popr的脚本是：

        $(document).ready(function() {
            $('.popr').popr();
    });

       $("#datagrid").on("click", "td", function(){
            $( this ).popr();
        });

当我使用时：

 $("#datagrid").on("click", "td", function(){
alert('Feugait');
});

只需点击一下即可。

链接到插件：http://www.tipue.com/popr/

Answer 1

使用documentation and demo为我工作 - 在此处回答格式化原因。

注意我将缩小的POPR缩小，因为它只是在这里，因为它没有CDN。

＆＃13;

X-FRAME-OPTIONS: DENY

＆＃13;

// no need to format this. It is the minified version of the POPR code
(function($){$.fn.popr=function(options){var set=$.extend({'speed':200,'mode':'bottom'},options);return this.each(function(){var popr_cont='.popr_container_'+set.mode;var popr_show=true;$(this).click(function(event)
{$('.popr_container_top').remove();$('.popr_container_bottom').remove();if(popr_show)
{event.stopPropagation();popr_show=false;}
else
{popr_show=true;}
var d_m=set.mode;if($(this).attr('data-mode'))
{d_m=$(this).attr('data-mode')
popr_cont='.popr_container_'+d_m;}
var out='<div class="popr_container_'+d_m+'"><div class="popr_point_'+d_m+'"><div class="popr_content">'+$('div[data-box-id="'+$(this).attr('data-id')+'"]').html()+'</div></div></div>';$(this).append(out);var w_t=$(popr_cont).outerWidth();var w_e=$(this).width();var m_l=(w_e / 2)-(w_t / 2);$(popr_cont).css('margin-left',m_l+'px');$(this).removeAttr('title alt');if(d_m=='top')
{var w_h=$(popr_cont).outerHeight()+39;$(popr_cont).css('margin-top','-'+w_h+'px');}
$(popr_cont).fadeIn(set.speed);});$('html').click(function()
{$('.popr_container_top').remove();$('.popr_container_bottom').remove();popr_show=true;});});};})(jQuery);

// ACTUAL INVOCATION:

$(function() {
  $('.popr').popr();
});

＆＃13;

/*
Popr 1.0
Copyright (c) 2015 Tipue
Popr is released under the MIT License
http://www.tipue.com/popr
*/


.popr
{
     cursor: pointer;   
}
.popr a
{
     color: #333;
     text-decoration: none;
     border: 0;    
}
.popr-box
{
     display: none;
}
.popr_content
{
     background-color: #fff;
     padding: 7px 0;
     margin: 0;
}
.popr-item
{
     font: 300 14px/1.7 'Helvetica Neue', Helvetica, Arial, sans-serif;
     color: #333;
     padding: 4px 29px 5px 29px; 
}
.popr-item:hover
{
     color: #333;
     background-color: #dcdcdc;
}

.popr_container_bottom
{
     display: none;
     position: absolute;
     margin-top: 10px;
     box-shadow: 2px 2px 5px #f9f9f9;
     z-index: 1000;
}
.popr_container_top
{
     display: none;
     position: absolute;
     box-shadow: 2px 2px 5px #f9f9f9;
     z-index: 1000;
}
.popr_point_top, .popr_point_bottom 
{
     position: relative;
	background: #fff;
	border: 1px solid #dcdcdc;
}
.popr_point_top:after, .popr_point_top:before
{
	position: absolute;
	pointer-events: none;
	border: solid transparent;
	top: 100%;
	content: "";
	height: 0;
	width: 0;
}
.popr_point_top:after
{
	border-top-color: #fff;
	border-width: 8px;
	left: 50%;
	margin-left: -8px;
}
.popr_point_top:before 
{
	border-top-color: #dcdcdc;
	border-width: 9px;
	left: 50%;
	margin-left: -9px;
}
.popr_point_bottom:after, .popr_point_bottom:before
{
	position: absolute;
	pointer-events: none;
	border: solid transparent;
	bottom: 100%;
	content: "";
	height: 0;
	width: 0;
}
.popr_point_bottom:after
{
	border-bottom-color: #fff;
	border-width: 8px;
	left: 50%;
	margin-left: -8px;
}
.popr_point_bottom:before 
{
	border-bottom-color: #dcdcdc;
	border-width: 9px;
	left: 50%;
	margin-left: -9px;
}

＆＃13;

Jquery点击事件必须单击两次

1 个答案: