特定の条件が満たされたときにjQueryの.on（）関数で関数を終了する方法

Question

次のjavascript/jqueryコードがあります。

私はJavaScriptの初心者ですので、この質問は非常に解決しやすい場合は謝罪します。 エラーがある場合、またはサーバー上にキーが見つからない場合は、この.on（ 'クリック'）機能を終了します。クリックバインドでは、フォーム上のポストリクエストが発生するため、これらの2つの条件が満たされない場合は、実行を継続したいと思います。私は他の例を調べて、return,.stopPropagationなど

のようなものを試しました。 return;とreturn false;を試しましたが、まだページが更新され、フォームの投稿要求が発生します。

私は間違っていますか？

$(document).ready(function() { 

    var validation = false; 
    $('#submitform').on('click', function(e) { 

     if (validation === true) { 
      validation = false; // reset flag 
      return;// let the event bubble away 
     } 

     if ($('#street_number') == "" && $('#route') == "" && $('#lat') == "" && $('#lon') == "" 
       && $('#administrative_area_level_1') == "") { 
      alert("Unknown Address"); 
      validation = false; 
      e.preventDefault(); 
      return false; 
     } 
     else { 
      var data_dict = { 
       // Number 
       'street_number': $('#street_number').val(), 
       // Address 
       'address': $('#route').val(), 
       // City 
       'city': $('#locality').val(), 
       // postal code 
       'postal_code': $('#postal_code').val(), 
       // State 
       'state': $('#administrative_area_level_1').val(), 
       // Country 
       'country': $('#country').val() 
      }; 
      $.ajax({ 
       url: '/zillow_check/', 
       data: data_dict, 
       method: 'POST' 
      }).then(function (response) { 
       console.log("Checking for Zillow ID..."); 
       if (response.error) { 
        console.error("There was an error " + response.error); 
        $('.dashboard-main__appartment--input').addClass('serverError'); 
        validation = false; 
        e.stopImmediatePropagation(); 
        return; 
       } else { 
        console.log("Zillow key: " + response); 
        if (response == 'No zillow ID found.') { 
         // You can change this to whatever you like. 
         alert("Can't add this object. It does not exist on Zillow. Check the Address and try again."); 
         validation = false; 
         e.stopImmediatePropagation(); 
         return; 

        } 
        else if (isNaN(response) == false) { 
         validation = true; 
         $('#propertyform').submit() 
        } 
       } 

      }); 

     } 
    }); 
}); 

Answer 1

すべてのケースのデフォルトを直ちに防止する必要があります。

Ajaxは非同期ですので、デフォルトを防ぐために完了するのを待つことはできません。それは遅すぎます。

$('#submitform').on('click', function(e) { 
    e.preventDefault(); 
    // no need for other instances of preventDefault() beyond here or for `stopImmediatePropagation()` 

    // your other code 

})