作者iam87king (沉默伤心)
看板Ajax
标题Re: [问题] 呼叫div，hide该div後，重复执行的bug？
时间Wed Jul 27 20:42:08 2011
※ 引述《terrybob (罪云樵)》之铭言：
: [问题描述]
: 当点击<a>时，会呼叫<div id="shareit-box">显示在页面上，
: 当点击<div id="shareit-box">里的按钮，进行关闭动作时，
: 我放置了 alert("结束"+boxtitle); ，看关闭按钮执行时，跳了几次alert…
: 测试结果时，会一直不断跳出alert，而且跳出alert的顺序，
: 会是我每次点过<a>的连结顺序…
: 我想问的是…是否有方法，可以第一次点击显示alert之後，
: 该物件执行就结束了，其他的alert不再会执行？
: 谢谢！
: [html]
: <div style="border:#000000 1px solid; margin-left:200px;">
: <a href="#" class="alert" rel="shareit" boxtitle="AAA">AAA</a><br/>
: <a href="#" class="alert" rel="shareit" boxtitle="BBB">BBB</a><br/>
: <a href="#" class="alert" rel="shareit" boxtitle="CCC">CCC</a><br/>
: <a href="#" class="alert" rel="shareit" boxtitle="DDD">DDD</a><br/>
: <a href="#" class="alert" rel="shareit" boxtitle="EEE">EEE</a><br/>
: <a href="#" class="alert" rel="shareit" boxtitle="FFF">FFF</a><br/>
: <a href="#" class="alert" rel="shareit" boxtitle="GGG">GGG</a><br/>
: </div>
: <div id="shareit-box" style="display:none;">
: <div id="shareit-header"></div>
: <div id="shareit-body">
: <div id="shareit-submitbox">
: <input name="btn_end" type="button" class="style2" />
: </div>
: </div>
: </div>
: [jquery]
: $(document).ready(function()
: {
: $('a[rel=shareit]').mousedown(function()
: {
: var height = $(this).height();
: var top = $(this).offset().top;
: //get the left and find the center value
: var left = $(this).offset().left +
: ($(this).width() /2) -
: ($('#shareit-box').width() / 2);
: $('#shareit-header').height(height);
: $('#shareit-box').show();
: $('#shareit-box').css({'top':top, 'left':left});
: var box_title = $(this).attr("boxtitle");
: $("input[name=btn_end]").click(function()
: {
: alert("结束！"+box_title); // <=测试用的alert
: $('#shareit-box').hide();
: return false;
: });
: $('#shareit-header').click(function () {
: $('#shareit-box').hide();
: })
: });
: });
: 以上，谢谢。
你把关闭动作的事件绑在mousedown里面，所以每次mousedown就会再绑一次关闭动作
结局就是你按n次就会有n次关闭动作
解决方法是把$("input[name=btn_end]").click(function(){ ... })移出来，另外
$('
#shareit-header').click(function(){ ... })也可以移出来，因为这个动作
似乎也没有必要每mousedown一次就要绑一次
2个地方提醒一下
1.常用的jquery物件可以设一个变数存起来:
例如你程式码里面常出现的$(this)，可以用个变数，比如说var j_obj = $(this);存
再用j_obj去操作你要的动作，而且在一个function之中又有function的程式码里也可
以比较清楚知道现在的this指的是哪一层的this
2.可以串接就串接
$('
#shareit-box').show();
$('
#shareit-box').css({'top':top, 'left':left});
可以写成
$('
#shareit-box').show().css({'top':top, 'left':left});
另外你要设定top和left，别忘了position也要一起设定
以下是我改过的程式码，不过不知道合不合你需求就是了
$(function(){
$('a[rel=shareit]').click(function(){
var j_obj = $(this);
var top = j_obj.offset().top + j_obj.height();
var left = j_obj.offset().left + (j_obj.width()/2);
$('
#shareit-box').show().css({'top':top, 'left':left, 'position':'absolute'});
$('
#shareit-header').text(j_obj.attr("boxtitle"));
});
$("
#shareit-box").click(function(e){
if(e.target.tagName === "INPUT" && e.target.name === "btn_end"){
alert("结束！" + $('
#shareit-header').text());
}
$('
#shareit-box').hide();
});
});
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 118.167.177.161
1F：推 terrybob:未试先推！感谢~ 07/27 21:47