jquery events on submit submitフィールド

Question

jquery submitボタンonclickとdefaultイベントに問題があります。 私がしたいのは、送信ボタンのクリックイベントを置き換えて表示するダイアログボックスを表示することです。はいをクリックすると、デフォルトのonclickイベントが開始されます。送信ボタンが定義されていれば、デフォルトのイベントが発生する必要があります（ボタンはフォームを送信します）.submit（）関数は私のためには動作しません。なぜなら、このボタンをフォームからも送信する必要があり、ボタンがクリックされなかった場合です。送信データなしのデータ。

ベローコードには問題があります。アラート（ 'xxx'）は常に呼び出され、そうでなければなりません。また、アラートボタンを削除してもボタンアラートとダイアログ作成が再度呼び出されます。ボタンイベント（ボタンで送信するフォーム）。

$('input.confirm').each(function(){ 
    var input = this; 
    var dialog = document.createElement("div"); 
    $(dialog).html('<p>AREYOUSHURE</p>'); 
    $(input).click(function(event) 
    { 
     event.preventDefault(); 
     var buttons = {}; 
     buttons['NO'] = function() { $(this).dialog("close"); }; 
     buttons['YES'] = function() { $(input).trigger('click'); $(this).dialog("close"); }; 

     $(dialog).dialog(
     { 
      autoOpen: false, 
      width: 200, 
      modal: true, 
      resizable: false, 
      buttons: buttons 
     }); 
     $(dialog).dialog('open'); 
     return false; 
    }); 
}); 

<form method="post" action=""> 
    <input type="hidden" value="1" name="eventId" /> 
    <input type="submit" value="Check" name="checkEvent" class="confirm" onclick="alert('xxx');" /> 
</form> 

Answer 1

onclickイベントを追加すると、すべてのjqueryが実行されます。 jQueryと混合する場合は、onclickを使用しないことをお勧めします。

よりよい解決策：

var buttons = {}; 
var dialog = document.createElement("div"); 
$(dialog).html('<p>AREYOUSHURE</p>'); 
$('.confirm').click(function(event){ 
    event.preventDefault(); 
    var input = $(this); 
    buttons['NO'] = function() { $(this).dialog("close"); }; 
    buttons['YES'] = function() { $(input).trigger('click'); $(input).closest('form').submit(); $(this).dialog("close"); }; 

    $(dialog).dialog(
    { 
     autoOpen: false, 
     width: 200, 
     modal: true, 
     resizable: false, 
     buttons: buttons 
    }); 
    $(dialog).dialog('open'); 
    return false; 
}); 

は、グローバルスコープのボタンを作成します。 [はい]をクリックすると は、単に形式に

Answer 2

を提出するには（jQueryの1.7以降で利用可能）on()とoff()方法を組み合わせることにより、デフォルト以外の1からデフォルトのハンドラをトリガすることが可能です。アイデアは次のとおりです。

• がpreventDefault()を呼び出すon()方法を使用してカスタムハンドラを追加します。
• 確認ボタンがクリックされた場合は、trigger()を呼び出す前にoff()を使用してカスタムハンドラを削除してください。 NOボタンがクリックされたときに

  $(function() { 
      var input = $('input.confirm'); 
      var dialog = document.createElement("div"); 
  
      $(dialog).html("<p>AREYOUSHURE</p>"); 
      $(dialog).dialog({ 
      autoOpen: false, 
      width: 200, 
      modal: true, 
      resizable: false, 
      buttons: { 
       "NO": function() { 
       $(this).dialog("close"); 
       }, 
       "YES": function() { 
       $(this).dialog("close"); 
       $(input).off("click", askConfirmation); 
       $(input).trigger("click"); 
       }, 
      } 
      }); 
  
      var askConfirmation = function (event) { 
      event.preventDefault(); 
      $(dialog).dialog("open"); 
      }; 
  
      $(input).on("click", askConfirmation); 
  }); 
  

  このコードは何もしないだろう、とがYESボタンがクリックされたときに、適切submit値でフォームを送信します：次のようになり

あなたの例は次の通りです。

また、onclick属性をjQueryと組み合わせて使用​​すると、テスト用として使用しても予期しない動作が発生する可能性があります。デフォルトアクションがトリガーされたかどうかを確認するには、<form action="/some/unexistent/url">を設定することをお勧めします（そうした場合、404エラーのようなものが表示されますが、そうでなければ同じページにとどまります）。