Jquery点击事件必须点击两次
Jquery click event have to click twice
我正在使用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);
很抱歉我错过了剧本的一小部分。
载脂蛋白用于获取巨大数据网格上的选项。
我用来激活载脂蛋白的脚本是:
$(document).ready(function() {
$('.popr').popr();
});
$("#datagrid").on("click", "td", function(){
$( this ).popr();
});
当我使用:
$("#datagrid").on("click", "td", function(){
alert('Feugait');
});
它只需单击即可工作。
插件链接:http://www.tipue.com/popr/
由于格式原因,在这里使用文档和演示回答对我很有用。
注意我保留了缩小的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;
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;
}
<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>
相关文章:
- Jquery点击事件必须点击两次
- 一次点击,两次'单击'事件已启动
- 替换的超时事件触发两次或两次以上(有时)
- jquery on触发器按键事件两次
- 骨干视图触发事件两次
- animationEnd 事件处理程序 - 事件侦听两次
- 触发的事件被接收两次.如何找到鬼视图
- 服务器触发客户端事件两次
- `object:selected`事件触发两次
- 如何处理iframe中两次或根本不触发的IE11 localStorage事件
- 谷歌地图api v3 zoom_changed事件在fitBounds调用后激发了两次
- 为什么主干视图触发更改事件两次
- 如何防止在快速单击时两次调用en事件处理程序
- jQuery点击事件触发两次
- 为什么事件mouseenter在JavaScript中触发两次
- 在具有单击事件的 li 内时停止选中两次复选框
- 引导模式切换事件发生两次
- j查询点击事件触发两次
- 骨干模型触发“变化”.两次事件
- 在父元素具有相同事件函数的子元素上单独触发两次事件函数