Need help with jquery .live() function

JavaScript
1

So I’ve read examples from a google search and the actual jquery docs about this and still just…*don’t ‘get it’.

So I’ve got this project where when you upload something to the server, the targeted row gets replaced by the updated html. That’s working just fine. What’s not working is that none of my js functions apply to this new row (because the dom’s been loaded). That’s when I found this live() function. I guess my question is what function do I even want to look for? change() seems to come to mind first, but if I give it a class to look for… is it looking at all instances of that class? And is change() even appropriate, I’m destroying the div and replacing it with an updated version of itself.

Can I just do something as simple as $(‘.target_class’).live(); with no event?

Thanks for any help. REALLY confused.

2

I don’t know what your js functions do, but I’ll just assume that you want an alert box that sais hello when you click on certain elements.

When you do something like this


function sayHello() {
    alert("hello");
}
$("tr").click(sayHello);

What basically happens is jquery gets all of of the tr elements that currently exist in the dom. One by one, it tells each of those elements that if they get clicked, they should call the sayHello function.

So, if you later add new tr elements to the dom, they simply don’t know they’re supposed to do something when they get clicked. The solution is to tell them, right after you add them to the dom. Although, you would want to make sure you only do this for the new elements, otherwise some of the elements will think they need to run the function twice when they get clicked.

I won’t get into trying to explain in depth how live() works. You need to first have a good understanding of how events work, and the technique called event delegation. But, you could kinda of think jquery simply watching for the event anywhere in the document, on any element, and then checking to see if your selector matches. If so, it calls your event handler function.

You still need to specify the event, and function.


$("tr").live("click", sayHello);
3

Actually…*thank you! Oddly enough, your reply sparked some kind of understanding that I didn’t get elsewhere. So I need to put all my actions outside of their respective ‘actions’ and call them like you have above.

I guess my new hangup is which eventType am I supposed to select?

so, if it helps, here an example ‘entry’ row for reference (GREATLY reduced in content/complexity).
The a.row_form element toggle slides a hidden form out (second code box). The a.file_icon fires a ‘tooltip’ type script that shows a preview of the file. So neither functions work after the row is updated/replaced.

I tried $(‘div.list_item’).live(“submit”, slideOutForm); …*unfortunately didn’t work. Am I just calling the wrong eventType? Or am I still WAY off on understanding this?


<div class="list_item" id="site_entry_1409">
	<a href="/entry/show/174" class="row_form" id="archive_1409"><span>archive</span></a>
	<a href="/entry/download/1409" class="file_icon icon_preview" id="1409" rel="/images/file_thumbnails/174/thumb_174-jQ1i-0510.jpg">
		<img alt="Jpg" src="/images/fileIcons/jpg.png?1236262872" />Download File
	</a>
</div>



	function slideOutForm() {
		id = $(this).attr('id');
		attach_button_id = id.split('_');
	    $('#attach_form_' + attach_button_id[1]).toggle("slide", { direction: "right" }, 300);
		return false;
	}
	$(".row_form").click(slideOutForm);
4

You shouldn’t put the live on the “submit” event, but replace

$(".row_form").click(slideOutForm);

with

$(".row_form").live("click", slideOutForm);

The first code block reads:
Find all elements on the website with class name row_form, and add the onclick event to fire the slideOutForm function

While the second block reads:
Find all elements on the website with class name row_form, and add the onclick event to fire the slideOutForm function AND also add this same onclick event to all elements with class name row_form that do not exist but might be created in the future.

5

WOW! Thank you!

Totally had how that worked backwards in my head. Thanks both for your help with this!