jQuery ready, delegate, live!

Recently I was browsing through the jQuery subr reddit and noticed this question pop up. Since I am sure this is a pretty common question on “Why won’t my jQuery command work properly”, I figured I would give a shot at answering it.

Hey guys, I’m sure this has been answered before but I can’t seem to find anything by searching Google or /r/jquery.

I am a beginner with this so forgive me, but I can’t find an explanation to this anywhere and I’m curious. When I try to stop the default submit function of a form in the <head> tag of a .html file it won’t work, but when I copy and paste the same code into the <body> it works fine. Regardless of where I place it, it is always below the link to the jquery library. This is really confusing and I was hoping you guys could explain this for me. Thanks!

via jQuery <script> in <body> or *lt;head>.

Problem

Here was a copy of the code that worked:


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>

<script>
$("form").submit(function(){
return false;
});
</script>
<form id="uriForm" action="">
<input type="textbox" name="uriInput" id="uriInput" />
<input type="submit" value="submit" id="submit" />
</form>
</body>
</html>


However, if he moved the <script> tag into the head, the form submit stopped working.


<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script>
$("form").submit(function(){
return false;
});
</script>
</head>


Why?

Why on earth would the first one work, and the second one not? Well, it comes down to when the dom is ready. In the second example, jQuery is looking for a form tag that hasn’t been parsed by the browser yet. So it returns an empty jQuery object, to which the submit event is attached.

The Fix

We have a couple of ways of fixing this issue.

.ready()

The .ready() event attached to the BODY tag, will allow us to attach the submit event as soon as the DOM is ready


$(document).ready(function() {
$("form").submit(function() {
return false;
});
})


.delegate()

The .delegate() method can be placed anywhere in your page. Since the delegate function will attach the event to any current “form” elements, or any future “form” elements that may appear in the DOM. The gotcha… If you only have one form element on the page, this will work fine. However, IF for some reason, you create another form element, this same event will be attached to that form as well.


$(document).delegate("form", function() {
$("form").submit(function() {
return false;
});
})


.live()

The .live() method is a variation/alternative of the .delegate() method. However, at least one element must exist before you can use it. Which means, you still need to wrap it in a .ready() or put it in the footer.

This method is a variation on the basic .bind() method for attaching event handlers to elements. When .bind() is called, the elements that the jQuery object refers to get the handler attached; elements that get introduced later do not, so they would require another .bind() call.


$(document).ready(function() {
$("form").live("submit", function() {
return false;
});
})


In all, either .ready() or .delegate() will work, just make sure you use them properly. You don’t want to add another form or other element and have it get an event you hadn’t planned on.

2 thoughts on “jQuery ready, delegate, live!

  1. michael

    Why don’t any of those work on newly generated forms. For example, I have a infinite scroll feature on my page and the script isn’t fired for the new forms loaded to the page. I’m using jquery 1.7.1

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>