after passing event in function event.preventDefault() is not working

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 and JavaScript Code

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

This is my javascript. I simplified it keep it short. My event.preventDefault() is not working.

@RahulKumar Probably you have a syntax error in the page, so your JavaScript fails to execute? — VisioN, Jul 27 '16 at 11:32
@RahulKumar You must post some html and js. why should a button just refresh the page on click? — Ashkan Mobayen Khiabani, Jul 27 '16 at 11:32
Use `preserve` option in your browser's console. It shows previous page's errors even after refreshing. — Mohit Bhardwaj, Jul 27 '16 at 11:34
I used `preserve`. I got this `Navigated to http://127.0.0.1/~rahulcomp/project/profile.php` — Rahul Kumar, Jul 27 '16 at 11:37
Add a console log message to the handler and see whether it is getting called — Arun P Johny, Jul 27 '16 at 11:39
Is your html loaded dynamically? If so, the button might not exist when you try attach the event to it. — Matt Lishman, Jul 27 '16 at 11:40
@RahulKumar You have different problem. Please check the answer below. — VisioN, Jul 27 '16 at 11:44

score 1 · Answer 1 · edited Jul 27 '16 at 11:41

1

You have binded your click handler in incorrect way.

Try this code instead:

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

edited Jul 27 '16 at 11:41

nicael

18,550
13
57
90

answered Jul 27 '16 at 11:39

Mohit Bhardwaj

9,650
3
37
64

score 1 · Accepted Answer · answered Jul 27 '16 at 11:41

Based on your HTML markup <button> element already has class updateProfile, so your code should look like that:

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

In your case passing .updateProfile as a second argument of on method binds click event to the element with class updateProfile inside <button> element in a delegated way.

after passing event in function event.preventDefault() is not working

2 Answers2