End to End Web Developers

End to End Web Developers

49,682 members
  • Join

    When you join a group, other members will be able to see your profile and message you. The group logo will be visible on your profile unless you change that setting.

  • Information and settings

Have something to say? Join LinkedIn for free to participate in the conversation. When you join, you can comment and post your own discussions.

Ninnah

Anyone have experience with jQuery "inheritance" issues, i.e. applying multiple jQuery functions to new DOM elements after an ajax call?

Lead Programmer / Server Admin at Choozle

Anyone have experience with jQuery "inheritance" issues, i.e. applying multiple jQuery functions to new DOM elements after an ajax call? I've tried various methods I've found on the web, but many of them appear to be outdated. One of the specific issues I am dealing with is that fancybox will not work on hrefs on new DOM elements after an ajax call. Any tips?

  • Comment (7)
  • May 11, 2012
  • Close viewer

Comments

  • Matti R.

    Matti

    Matti R.

    Software Architect, Project Manager

    Put all of your functions into a function like this:

    function loadFunctions() {
    // all your functions here
    }

    For your doc ready call the function:

    $(document).ready(function() {
    loadFunctions();
    });

    Use the long version of jQuery Ajax and call the function within the 'success':

    $.ajax({
    type: "POST",
    url: "function.php",
    data: ({catID: catID}),
    success: function(er){
    // whatever you normally do
    loadFunctions();
    }
    });

  • Martin H.

    Martin

    Martin H.

    Data Integration Engineer, SuperDB Team at Rakuten

    Hi Ninnah,

    can you post your code here?
    Otherwise it is hard to understand what is your issue.

    Have you looked at http://stackoverflow.com/
    You might find there what you need :)

    Regards
    Martin

  • Matti R.

    Matti

    Matti R.

    Software Architect, Project Manager

    Its very easy to understand the issue, she explained it clearly. She also does not reply to her own thread *rolleyes*

  • Shane M.

    Shane

    Shane M.

    Head of Database Services UK and Ireland at Version 1

    Yes, I recently had a problem with jQuery functions not working with Ajax injected code.

    I solved it using the jQuery live function, http://stackoverflow.com/questions/2262480/jquery-live-hover would be a good starting point. I had problems with the "hover" function, but got my code working using the "mouseenter" and "mouseleave" functions.

  • Ninnah H.

    Ninnah

    Ninnah H.

    Lead Programmer / Server Admin at Choozle

    @Matti -- sorry, I've been out of town. I will be trying all of these suggestions and keeping everyone updated on the problem. One link that was supplied outside of this thread via private message that looks helpful is http://pagefabric.com/blogs/2012/05/11/careful-with-ajax-and-your-jquery-events/.

  • Matti R.

    Matti

    Matti R.

    Software Architect, Project Manager

    Hello Ninnah,

    If its only a couple of functions, you should use live() or delegate(). The latest version of jQuery has on() which replaces live() and delegate() however thus far I have had problems with it.

    If however you have a great number of functions that must also work with your Ajax loaded content, then the method I described above is the better way. If there are DOM elements not affected by Ajax that use functions also required for Ajax, you should use unbind() first, otherwise you will get events bound more than once.

Have something to say? Join LinkedIn for free to participate in the conversation. When you join, you can comment and post your own discussions.

Your group posting status

Your posts across groups are being moderated temporarily because one of your recent contributions was marked as spam or flagged for not being relevant. Learn more.

Subgroups

See more
Feedback