作者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