SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    does anyone know how to bind an event to a link that is added by manipulation?

    Hello,

    I am using JQuery and I a horizontal navigation menu list
    and when they click on the 'play' link
    the current menu is changed with a new menu (new items replaced old items)
    but now i want to be able to click on View Categories of the new menu item and have it respond by executing categories.php

    $(document).ready(function() {
    $('#categoriesmenu').click(function(event) {
    $("#categoriesmenu").html("");
    $.get('categories.php',function(data)
    {
    $("#menu").html(data);
    });
    });

    $('#play').click(function(event) {
    $("#menu").html('<ul><li><a class="menulinks" id="categoriesmenu">View Categories</a></li></ul>')
    });

    });

    Any clues as to why its not working.

  2. #2
    SitePoint Member vidalstat's Avatar
    Join Date
    Dec 2007
    Location
    Brooklyn NY
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Event binding

    The cool thing about making ajax calls is that you retrieve the info without refreshing the page. However, if the data retrieved creates a new element, you need to bind it somehow. the current code you have fires on document ready, the new link your script creates doesn't get bound(binded?) because the document has already loaded. the following page explains this and several fixes way better than I could

    http://docs.jquery.com/Tutorials:AJAX_and_Events

    Also, you should check out the excellent jQuery plugin, LiveQuery it sort of automates all of the stuff you need to bind events from callbacks, etc.

    Hope this helps, and if anyone of you javacript gurus can articulate what I wrote at the top of this post better, please do. I find myself having to explain this often and I feel like I'm missing something.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ids should be unique to elements. You need to add the bind after the elment is created.

    if you use the W3C methods to create the elment you can even add the binding before adding it to the page.

    document.createElement(elem)
    Mashups, DOM Scripting and all the things we call Web2.0 blogger
    http://www.heavyweightgeek.org/
    http://twitter.com/heavyweightgeek

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys,

    @vidalstat, i downloaded the livequery its also easy to use which is good.
    On to another question.

    Im trying to solve cookies.
    This code does not work and i do not know why

    $('#aunz').livequery('click', function(event) {
    $.cookie('country', 'aunz', { expires: 7, path: '/', domain: 'mysite.com', secure: true });

    });

    If the user clicks on AU / NZ link which has id='aunz' then it is supposed to add a cookie to their computer.
    Any clues as to why its not working.

    Ben

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guys ive solved the cookie part so dont worry about answering that question.
    Thanks :-O)

    Ben


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
  •