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

看板Ajax作者iam87king (沉默傷心)時間14年前 (2011/07/27 20:42)推噓1(1推 0噓 0→)

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

※ 引述《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