防止$（「IMG」），點擊觸發幾次

我想知道如何防止確認消息被提示多次，在此先感謝！

的JavaScript

$('img.delete').click(function() {   
    if(confirm("This selected record will be deleted. Are you sure?")){ 
     //Do something... 
    } 
});

HTML

<tbody> 
    <tr> 
     <td><img class="delete" src="/images/delete.gif"><input value="708" type="hidden"></td> 
     <td>aaa</td> 
    </tr> 
    <tr> 
     <td><img class="delete" src="/images/delete.gif"><input value="595" type="hidden"></td> 
     <td>bbb</td> 
    </tr> 
    <tr> 
     <td><img class="delete" src="/images/delete.gif"><input value="19" type="hidden"></td> 
     <td>ccc</td> 
    </tr> 
</tbody>

來源

2012-11-29 Steve Lam

你所說的「多次」是什麼意思？ –

它是如何觸發多次的？當然，如果他們在「確認」中單擊「是」，您將刪除該行 - 因此該鏈接不可能再次單擊。 –

參考html代碼，確認消息「這個選定的記錄將被刪除，你確定嗎？」已被提示3次。 –

您代碼中的問題是您多次應用點擊處理程序;這是從您發佈的代碼中看不到的，但這絕對是原因。

如果運行$('img.delete').click(fn)多次，它不會覆蓋以前的點擊處理程序;相反，它增加了另一個處理器。之後，單擊img.delete時，將連續調用所有註冊的處理程序，從而生成一個彈出窗口，然後是另一個窗口。

應該通過調用.unbind()第一予以糾正;這樣做會有效地替換以前的點擊處理程序。

$('img.delete') 
    .unbind('click') 
    .click(function() {   
     if(confirm("This selected record will be deleted. Are you sure?")){ 
      //Do something... 

      // remove the image here I guess? 
     } 
    });

但是，如果您也可以追查根本原因，那將會更好。

來源

2012-11-29 09:18:25

謝謝你！你完全理解我的問題，你的解決方案對我來說真的很棒。你能解釋一下爲什麼我需要解綁嗎？ –

@ user1439709更新後的答案，請仔細閱讀:) –

不錯！謝謝傑克=] –

您可以通過取消綁定jQuery中做到這一點

$(function(){ 
    $('img.delete').click(function() {   
     if(confirm("This selected record will be deleted. Are you sure?")){ 
      //Do something... 
     } 
     $('img.delete').unbind('click'); 
    }); 

});

來源

2012-11-29 09:16:07 Swarne27

使用jQuery .one()方法，這幾乎是什麼被造的。

$('img.delete'.one('click',function() {   
      if(confirm("This selected record will be deleted. Are you sure?")){ 
       //Do something... 
      } 
     });

來源

2012-11-29 09:17:12 Blowsie

很好的答案，但你不需要'each'。 '$（'img.delete'）。one（..）''就足夠了 – Jamiec

@Jamiec不，這不是真的，如果你這樣做，它只會在一個img.delete上工作，而不是全部 – Blowsie

Doom場景：點擊'刪除' - >點擊'否' - >點擊'刪除'.... awww，不再彈出:( –

如果你擔心這個，你可一定要沒有事件處理程序後點擊：

var confirm_me=function() { 
    if(confirm("This selected record will be deleted. Are you sure?")){ 
     //Do something... 
    } 
    //restore event handler 
    $(this).one('click',confirm_me); 
    //prevent event propagation 
    return false; 
    } 

//BE sure that you not do that in loop. if possible do - see second code 
$('img.delete').one('click',confirm_me);

另一種情況：

var confirm_me=function() { 
    var t=$(this); 
    //check processing flag 
    if (t.data('processing')) return false; 
    //Set processing flag 
    t.data('processing',1); 


    if(confirm("This selected record will be deleted. Are you sure?")){ 
     //Do something... 
    } 

    //restore event handler 
    t.one('click',confirm_me); 
    //remove processing flag 
    t.data('processing',0); 
    //prevent event propagation 
    return false; 
    } 

$('img.delete').one('click',confirm_me);

來源

2012-11-29 09:18:45

使用它，它是我的驗證。

<script type="text/javascript"> 
var check = false; 
$(document).ready(function() { 
     $('img.delete').click(function() { 
     if (check != true) { 
      if (confirm("This selected record will be deleted. Are you sure?")) 
       check = true; 
     } 
     else { 
      alert('you have deleted one'); 
     } 
     }); 
    }); 
</script>

來源

2012-11-29 09:21:25

防止$（「IMG」），點擊觸發幾次

回答

相關問題