SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    976
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with jquery .live() function

    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.
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    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.
    Code:
    $("tr").live("click", sayHello);

  3. #3
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    976
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code HTML4Strict:
    <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>

    Code JavaScript:
    	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);
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    You shouldn't put the live on the "submit" event, but replace

    Code JavaScript:
    $(".row_form").click(slideOutForm);

    with

    Code JavaScript:
    $(".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. #5
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    976
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW! Thank you!

    Totally had how that worked backwards in my head. Thanks both for your help with this!
    your brain reacts in the same way whether you are
    looking at something or thinking about it...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •