2016-05-15 104 views
0

我使用POPR Jquery插件來獲得一個簡單的彈出式菜單。 雖然腳本工作正常,但我總是必須點擊兩次來激活我的彈出窗口。我怎樣才能得到它與單擊一下工作?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/

+0

你能分享一個活鏈接到你在哪裏得到這個問題? –

+0

當提問有關圖書館和插件的問題時,它有助於鏈接相關主頁。 –

+0

對不起Imair,這是一個保護區。我不能給一個真人版。 –

回答

0

對我的作品的documentation and demo - 回答這裏格式的原因。

備註我將縮小的POPR縮小了,因爲它只是在這裏,因爲它沒有CDN。

// 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(); 
 
});
/* 
 
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; 
 
\t background: #fff; 
 
\t border: 1px solid #dcdcdc; 
 
} 
 
.popr_point_top:after, .popr_point_top:before 
 
{ 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
\t border: solid transparent; 
 
\t top: 100%; 
 
\t content: ""; 
 
\t height: 0; 
 
\t width: 0; 
 
} 
 
.popr_point_top:after 
 
{ 
 
\t border-top-color: #fff; 
 
\t border-width: 8px; 
 
\t left: 50%; 
 
\t margin-left: -8px; 
 
} 
 
.popr_point_top:before 
 
{ 
 
\t border-top-color: #dcdcdc; 
 
\t border-width: 9px; 
 
\t left: 50%; 
 
\t margin-left: -9px; 
 
} 
 
.popr_point_bottom:after, .popr_point_bottom:before 
 
{ 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
\t border: solid transparent; 
 
\t bottom: 100%; 
 
\t content: ""; 
 
\t height: 0; 
 
\t width: 0; 
 
} 
 
.popr_point_bottom:after 
 
{ 
 
\t border-bottom-color: #fff; 
 
\t border-width: 8px; 
 
\t left: 50%; 
 
\t margin-left: -8px; 
 
} 
 
.popr_point_bottom:before 
 
{ 
 
\t border-bottom-color: #dcdcdc; 
 
\t border-width: 9px; 
 
\t left: 50%; 
 
\t margin-left: -9px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="popr" data-id="1">Feugait nostrud</div> 
 

 
<div class="popr-box" data-box-id="1"> 
 
<a href="#"><div class="popr-item">Feugait delenit</div></a> 
 
<a href="#"><div class="popr-item">Vero dolor et</div></a> 
 
<a href="#"><div class="popr-item">Exerci ipsum</div></a> 
 
</div>