Javascript - jQuery preventDefault method

Question

I am a javascript noob, so apologies if this question is not for this forum. I am trying to understand jQuery method:

e.preventDefault()

In the code below, when moving items form one list to another it is needed for us to be able to move the items. I would like to know what exactly is happening there and what default action are we preventing from happening?

 $('#move').click(
  function(e) {
    $('#list1 > option:selected').appendTo('#list2');
    e.preventDefault();
  });

$('#moveAll').click(
function(e) {
  $('#list1 > option').appendTo('#list2');
  e.preventDefault();
});

$('#removeAll').click(
  function(e) {
    $('#list2 > option').appendTo('#list1');
    e.preventDefault();
  });

w3schools.com/jsref/event_preventdefault.asp

Divyesh Savaliya
– Divyesh Savaliya

2016-04-21 11:49:17 +00:00
Commented Apr 21, 2016 at 11:49 — Divyesh Savaliya
– Divyesh Savaliya, Commented Apr 21, 2016 at 11:49
api.jquery.com/event.preventdefault Read the description.

epascarello
– epascarello

2016-04-21 11:53:57 +00:00
Commented Apr 21, 2016 at 11:53 — epascarello
– epascarello, Commented Apr 21, 2016 at 11:53

anand · Accepted Answer · 2016-04-21 15:30:43Z

2

Well basically when you click hyperlink it posts back to url or # When we add e.preventDefault() function, jQuery will prevent default action of click event.

Therefore when you click #move, page will not refresh but action within function will be executed.

Hope this helps!

edited Apr 21, 2016 at 15:30

anand

1,53614 silver badges28 bronze badges

answered Apr 21, 2016 at 11:52

Ifrahim Rasool

583 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ludwig Over a year ago

Thank you very much, this confused me a bit since my hyperlink had an empty href="" so I thought it wouldn't refresh the page anyway, thanks again for the explanation!

Justinas · Accepted Answer · 2016-04-21 11:52:23Z

1

It will prevent further default action for current event.

E.g. clicking on link will follow href of element. e.preventDefault(); will prevent following link and you will not be redirected.

More information here

$(document).ready(function() {
  $('#a1').click(function(e) {
    e.preventDefault();

    alert('Clicked, but not following link.');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.com" id="a1">Link with preventDefault</a>
<br/>
<a href="http://google.com" id="a2">Link without preventDefault</a>

answered Apr 21, 2016 at 11:52

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

Comments

Gaurav Aggarwal · Accepted Answer · 2016-04-21 12:09:56Z

First of all e.preventDefault() should be first line when defining what all things will happen in function.

 $('#move').click(
  function(e) {
    e.preventDefault();
    $('#list1 > option:selected').appendTo('#list2');
  });

$('#moveAll').click(
function(e) {
  e.preventDefault();
  $('#list1 > option').appendTo('#list2');
});

$('#removeAll').click(
  function(e) {
    e.preventDefault();
    $('#list2 > option').appendTo('#list1');
  });

Secondly preventDefault prevents the default function of element to which it is applied.

For ex:

<a href="#" class="clickBtn">

If you fire event on above <a> by default it will take to document to top and will show a # in url and then fire you function but if you use preventDefault then its default function of linking will be prevented.

Collectives™ on Stack Overflow

Javascript - jQuery preventDefault method

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related