jQuery：ボタンのクリック確認

Question

確認のためにメンバーアカウントを削除するためのhtmlとjqueryのコードがあります。しかし、コードはうまくいかないようです。ポップアップウィンドウで「キャンセル」をクリックしても依頼は依然として送信され、アカウントは削除されます。これをどのように修正すればよいですか？ありがとう。

HTML：

<button class="member" href="/admin?arg1=deleteMember" onclick="return confirm('Are you sure？')">Delete member</button> 

のjQuery：

$(document).ready(function() { 
    $('.member').click(function() { 
    var url = $(this).attr('href'); 
    $('#content').load(url); 
     return false; 
    }); 
}); 

Answer 1

$(document).ready(function() { 
    $('.member').click(function() { 
    if (confirm('Are you sure?')) { 
     var url = $(this).attr('href'); 
     $('#content').load(url); 
    } 
    }); 
}); 

そして、HTML要素からのonclick属性を削除します。

Answer 2

あなたは2つの方法でイベントを宣言しました。 1つはインラインイベントハンドラを使用し、1つはJQueryを使用します。彼らはreturn falseと同じように反応しません。

return falseは、トラック内のイベントの伝播を停止します。およびは、ブラウザが適用したデフォルトの動作を防止します。通常のインラインイベントハンドラでは、デフォルトの動作を停止するだけです。このボタンの場合、既定の動作はありません。単なるボタンです。したがって、「キャンセル」をクリックするとうれしく偽を返し、次にJQueryイベントを実行します。

この問題を解決するには、すべてのロジックをJQueryまたはインラインイベントの1か所に配置するか、すべてのロジックを実行する関数をインラインイベントで呼び出すのが最も簡単です。例えば

は：input type="submit"ボタンまたはリンクと同じように、停止するデフォルトの動作がないので

button（または input type="button"）のためのクリックハンドラで falseを返す

$(function() 
{ 
    $('.member').click(function() 
    { 
     var href = $(this).attr('href'); 
     if (/delete/.test(href)) if (!confirm('Are you sure?')) return; 
     $('#content').load(href); 
    }); 
}); 

Answer 3

は、効果がありません。

タグでonclick属性を削除し、jQueryのクリックハンドラでconfirmを呼び出す：

$(document).ready(function() { 

    $('.member').click(function() { 
    if (window.confirm('Are you sure？')) { 
     $('#content').load($(this).attr('href')); 
    } 
    }); 

}); 

Answer 4

[OK]を。私はこれらの有効な答えのいずれかを見る前に私自身でそれを理解しました。私はちょうどしようとする人のために地雷をスローするつもりです：

FIRST THE HTML

第一：これはあなたがユーザーに提示されているボタンであると仮定します

<button id="btn_to_check">Do Something</button> 

第二：ユーザーがボタン#btn_to_checkをクリックした場合にのみ、その意図を確認するための2つのボタン（確認を受け入れて戻る）の確認ウィンドウが表示されます。

<div id="btn_confirmation_window" style="display:none"> 
    <button id="accept" value="true">accept</button> 
    <button id="go_back" value="false">go back</button> 
</div> 

NOW JAVASCRIPT

$('#btn_to_check').on('click', function(){ 
    confirmationWindow(); 
}); 

function confirmationWindow(){ 
    $('#btn_confirmation_window').fadeIn(); //or show() or css('display','block') 
    $('#btn_confirmation_window button').on('click', function(){ 
      var confirm= $(this).attr('value'); 
      if (confirm=='true') { 
       //Code if true e.g. ajax 
      } else if (confirm=='false'){ 
       //Code if false 
      } 
     } 
} 

はそれが役に立てば幸い！