Re: [問題] 呼叫div，hide該div後，重複執行的bug？

看板Ajax作者senser (彷彿曾經一起死過)時間14年前 (2011/07/28 15:41)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串3/3 (看更多)

對你的問題在於你重複bind event 你的event trigger時都會把每個bind過event handler都執行一次這是DOM2 event的特性當你把他移出來之後你可能會有另一個問題就是如何pass你的 box_title 此時你可以把他宣告在外面而你mousedown時可以去改變的他的值所以你的input的click trigger時因為兩個closures在同個environment 所以應該可以抓到每次的box_title改變後的值試試看吧 ※ 引述《iam87king (沉默傷心)》之銘言： : ※ 引述《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: 71.104.223.87