Applying an onclick event to an element that doesn't exist on page load

Question

I have styled a list to look like a select box and I want to fire a function when the user clicks an element in the list however the element is loaded via AJAX and hence isn't there when the page loads and I can't bind an onclick event to it onDomReady.

If I had it as a normal select list I could just tag on an onChange event to the <select> field, but I obviously can't do that in my case.

My HTML:

<div id="main_category_field" class="fields">
    <div class="cat_list">
        <ul>
            <li class=""><a rel="1866" href="#1866">Sports Cards &gt;</a></li>
            <li class=""><a rel="1867" href="#1867">Gaming Cards &gt;</a></li>
            <li class=""><a rel="1868" href="#1868">Non-Sport Cards &gt;</a></li>
            <li class=""><a rel="1869" href="#1869">Supplies &amp; Storage &gt;</a></li>
            <li class=""><a rel="1940" href="#1940">Video Games </a></li>
        </ul>
    </div>
    <div class="contentClear"></div>
</div>

How can I run a function whenever the user clicks any of these options? Also would be great if you could also advise how to pass the respective value of the rel back when they click an option.

Using jQuery so options in that would be preferred.

Edit: Meant to say that the main element main_category_field is a static element. The elements inside are loaded via AJAX.

bipen · Accepted Answer · 2014-01-14T11:14:18.527

7

you need to delegate your elements to static parent , if the element is added dynamically using on() try this

  $(document).on('click','li a',function(e){
    e.preventDefault();
    var rel = this.rel;
     //or using attr()
    var rel=$(this).attr('rel'); 
     alert(rel);  
  });

however delegating it to its closest static parent(present at a time of insertion) is better than document itself.. so if you are adding the list inside main_category_field div.. then you can use

    $('#main_category_field').on('click','li a',function(e){     
         //same stuff

edited Jan 14 '14 at 11:14

answered Jan 14 '14 at 11:09

bipen

36,319
9
49
62

Thanks for the alternate method via the `main_category_field` element :) – Brett Jan 14 '14 at 14:33
Can someone give how you could write the `.on('click','li' a'` part in pure JavaScript? I've never seen that trick of adding on 'li a' like that for JQuery even, very neat. But I am making a tool in JavaScript where this trick would be very useful as I am having the same problem as OP with dynamically adding select options. – Christine268 Sep 24 '15 at 18:11
hmm, yes but it will not be as easy as using `on` jquery event since you have to keep event bubbling and traversing in mind to use event delegation in pure javascript. Here is a good blog to get started with http://davidwalsh.name/event-delegate – bipen Sep 30 '15 at 06:22

score 5 · Answer 2 · answered Jan 14 '14 at 11:09

The key word is event delegation. If you want to assign event handlers to dynamically added elements for which you know their "future" selectors, you should use the .on() method on an (already existing) parent element of those dynamic elements.

The second parameter to .on() is then the selector of the dynamically added elements

$(document).on('click', '.cat_list li a', function(e) {
   alert(this.rel);   // show the "rel" attribute of the clicked a element
   e.preventDefault();  // to prevent the default action of anchor elements
});

upvote for explanation using `.on()` function for dynamically created elements. — Faron, Jan 14 '14 at 11:13

Pranav C Balan · Answer 3 · 2014-01-14T11:18:25.023

2

Use .on for listen dynamically created dom elements as follows

$(document).on('click','div.cat_list ul li a',function(){
     var rel=$(this).attr('rel');//to get value of rel attribute
     alert(rel);   
     //other operations
});

edited Jan 14 '14 at 11:18

answered Jan 14 '14 at 11:07

Pranav C Balan

113,687
23
165
188

score 2 · Answer 4 · answered Jan 14 '14 at 11:09

2

To bind an event handler to an element that does not yet exist on the page use on.

$(document).on("click", "#main_category_field", function(e){
   e.preventDefault();
   var rel = e.target.rel;
});

JS Fiddle: http://jsfiddle.net/82bAb/

answered Jan 14 '14 at 11:09

Kevin Bowersox

93,289
19
159
189

Applying an onclick event to an element that doesn't exist on page load

4 Answers4

Linked