nach Ereignis in Funktion Event.preventDefault() über funktioniert nicht

Question

<div id="address" class="col s12"> 
      <div class="row"> 
       <form method="post" action="" id="addressDetails"> 
       <div class="input-field col s6"> 
        <textarea id="lAddress" name = 'lAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea> 
        <label for="lAddress" data-error="Must be between 20 to 100 Characters">Local Address</label> 
       </div> 
       <div class="input-field col s6"> 
        <textarea id="pAddress" name = 'pAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea> 
        <label for="pAddress" data-error="Must be between 20 to 100 Characters">Permanent Address</label> 
       </div> 
       </form> 
      </div> 
      <div class="row center-align"> 
       <button type="submit" name="submitAddress" form="addressDetails" class="waves-effect waves-light light-blue darken-1 btn updateProfile">Save Address Details</button> 
      </div> 
      </div> 

HTML und JavaScript-Code

$(document).ready(function() { 
    $("button").on('click', '.updateProfile', function(event) { 
     event.preventDefault(); 
    }); 
}); 

Dies ist mein Javascript. Ich habe es vereinfacht, halte es kurz. Mein event.preventDefault() funktioniert nicht.

Answer 1

Basierend auf Ihrem HTML-Markup <button> Element hat bereits Klasse updateProfile, so dass Ihr Code sollte so aussehen:

$('button.updateProfile').on('click', function(e) { 
    e.preventDefault(); 
}); 

In Ihrem Fall .updateProfile als einen vorübergehenden zweites Argument von on Methode bindet click Ereignis an das Element mit Klasse updateProfileinnerhalb<button> Element in einem delegated way.

Answer 2

Sie haben Ihren Handler click auf falsche Weise gebunden. Statt

diesen Code Versuchen:

$(".updateProfile").on('click', function(event) { 
    event.preventDefault(); 
});