1

I've been over all the documentation for live() (which is now gone from jQuery), delegate(), and on(). After eight hours of hitting myself over the head with this problem, I cannot figure out how to fix it. I want to add an anonymous function to a bunch of links that are created from data brought in via AJAJ. I've tried the following code:

$("#more_items_outer").on(
            'click',
            '.show_more',
            function(a){
                var target = a.parentElement;
                if (target.is(":visible")){
                    target.hide("slow");
                } else {
                    target.show();
                }
            }
        );

This code works fine when I run it in the JS console on my development browser after the page has loaded. But this code does nothing for these links if it runs before the actual links are created. As I understand it (and as multiple sources, including the official jQuery docs, describe it), the on() function as I've used it in the above code should make things so that any element of class "show_more" that is created as a descendant of any element with the id "more_items_outer" will execute the anonymous function when it is clicked. This should be true even if the new element's creation post-dates the execution of this code. That's not happening on my dev system here, and I'm all ears as to why this might be so. I'm running jQuery 1.9.1, if that helps.

Improve this question
5
  • 1
    is your code executing after the dom has been loaded? ie. inside a $(function(){..}) block? Commented Feb 22, 2013 at 23:49
  • 1
    Eh, how do you click on links in invisible divs? Commented Feb 22, 2013 at 23:49
  • Does #more_items_outer exist when the page is first loaded and on() is called? Commented Feb 22, 2013 at 23:50
  • Can you make a jsfiddle? Commented Feb 22, 2013 at 23:52
  • @MikeBrant The static selector is meant to be there at the time the code is called, yes. The '.show_more' links are not there; they are created on the fly. Commented Feb 25, 2013 at 17:08

1 Answer 1

Reset to default
3

First, check out item 5 below. It looks to me like you have a couple javascript errors in your click event handler function.

In general, the dynamic form of .on() works like this:

$(static selector that exists).on('click', 'dynamic selector', function() {});

Since you haven't shown us your HTML or ajax, I can just enumerate the kinds of things that can go wrong:

  1. The object(s) represented by the static selector must exist at the time the .on() call is executed.
  2. The static selector objects must be parents of the dynamic objects.
  3. The dynamic selector must match children objects that either exist at the time of the original call or are added later.
  4. You could have a javascript error before the .on() call such that it is never exeucuting.
  5. You appear to have a javascript error in your handler function. Your code that references a.parentElement seems wrong. In that context, a is a jQuery event object and I don't believe it has a parentElement property. And, even if parentElement was an element, then the next line where you do target.is(":visible") would not work because target isn't a jQuery object. So, you at least have to fix the code in your handler function. If this is the only error, then you should be able to see these errors referenced in the javascript error console or the debug console.
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Right you are about "a", and I don't even need it. What I needed was "this" instead, and then I can navigate to where I need to be.
The problem is that I can't use a static element in the HTML file and have it work. Everything is created inside the div to which the static selector points, but the browser acts like the links are not children of the div. I think this might be a Leaflet problem and not a jQuery issue at all.
@lima - There is a static parent somewhere in the document, even if you go all the way up to document.body or you can run your event handling code AFTER you create a more direct parent. You HAVE to install the event handler on an object that exists. You can't install an event handler directly on a future object.
After rereading my comments, I have to say I'm being incredibly unclear. What I mean is that I've tried using elements that exist in the hardcoded document, and for some reason the click event is never fired. For instance, if I use $(document), which obviously exists prior to the .on() function running, the links don't do anything. If I force the .on() function to wait until the whole page is loaded and then run it using a selector of the direct (non-static) parent of a link, then I get results. Why would $(document) not work?
$(document).on() will work if you use the right arguments with .on() and nothing else in your code is blocking event propagation. You will have to show the HTML and code you tried (in your original question) for us to know what isn't correct. If these are links, the href will be processed on the link BEFORE delegated event handlers get to the event which is sometimes a problem with using <a> tags with delegated event handling.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.