12

確認付きでメンバー アカウントを削除するための次の 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;
  });
});
4

5 に答える 5

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

次に、HTML 要素から onclick 属性を削除します。

于 2013-02-16T05:45:49.467 に答える
3

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

JQuery イベント ハンドラーでreturn falseは、トラック内のイベントの伝播を停止し、ブラウザーが適用する既定の動作を防止します。通常のインライン イベント ハンドラーでは、既定の動作を停止するだけです。このボタンの場合、言及すべきデフォルトの動作はありません。それはただのボタンです。したがって、[キャンセル] をクリックすると false が返され、次の JQuery イベントの実行に進みます。

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

例えば：

$(function()
{
    $('.member').click(function()
    {
        var href = $(this).attr('href');
        if (/delete/.test(href)) if (!confirm('Are you sure?')) return;
        $('#content').load(href);
    });
});
于 2013-02-16T05:55:03.823 に答える
3

ボタンやリンクのように停止するデフォルトの動作がないため、 (または)falseのクリック ハンドラーで戻っても効果はありません。buttoninput type="button"input type="submit"

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

$(document).ready(function() {

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

});
于 2013-02-16T05:56:29.220 に答える
2

Ok。これらの有効な答えを見る前に、私は自分でそれを理解しました。私は誰でも試してみるために私のものを投げるつもりです：

最初の HTML

1つ目：これがユーザーに提示するボタンであるとします：

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

2番目:ユーザーがボタンをクリックした場合にのみ#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>

今はジャバスクリプト

$('#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
          }
      }
}

それが役に立てば幸い！

于 2014-09-09T03:41:22.927 に答える
2

これは非常に簡単であることがわかりました。ブートストラップとjqueryを使用するだけです。

    $(document).ready(function() {
        $('a[data-confirm]').click(function(ev) {
            var href = $(this).attr('href');
            $('#modal').find('.modal-title').text($(this).attr('data-confirm'));
            $('#modal-btn-yes').attr('href', href);
            $('#modal').modal({show:true});
            return false;
        });
    });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<a  href="controllers/my-delete.php?id=5" 
    class="btn btn-danger" 
    role="button" 
    style="width: 100%;"
    data-confirm="Are you sure you want to delete?">Delete</a>

<div class="modal fade " id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Are You Sure?</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        There is no way to undo this action
      </div>
      <div class="modal-footer">
        <a id="modal-btn-yes" class="btn btn-danger" >Yes</a>
        <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
      </div>

    </div>
  </div>
</div>

于 2018-04-05T19:58:24.717 に答える