1

Inside a jQuery loop, I'm trying to attach a click event to a dynamically created anchor tag which is contained in an LI element. The LI itself is dynamically created inside a static UL element. For some reason nothing gets fired when the anchor is clicked. Here is a simplified version of the problematic code:

$.each($.MyProject.cities, function (index, city) {
    $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").click(function (event) {
        console.info("Anchor clicked!");
        event.preventDefault();
        return false;
    }).html($("<span></span>").text(city.FullName).attr("class", "autoText"))).appendTo($("#visiblecities"));
});

where visiblecities is the id of the UL element and cities is a collection on which the loop iterates.

Any idea why the click event is not working?

Yosief Kesete
  • 217
  • 2
  • 6
  • 20

3 Answers3

4

Use event delegation to set up a single event handler that will react to all <a> elements, even if they're added after the code executes:

$('#visibleCities').on('click', 'a', function(event) {
    console.info('Anchor clicked!');
    event.preventDefault();
    return false;
});

Though, as gdoron mentioned in the comments, your <a> elements don't currently have any content so they won't actually be clickable.

Anthony Grist
  • 38,173
  • 8
  • 62
  • 76
  • I've put back the inner span element that forms the content. Still your answer above does not work. – Yosief Kesete Feb 25 '13 at 11:55
  • @YosiefKesete Any chance you could provide a [jsFiddle](http://jsfiddle.net) demo? – Anthony Grist Feb 25 '13 at 12:07
  • @YosiefKesete hey everything is working fine you just made a simple mistake you wrote $('#visiblecities') but it should be $('#visibleCities') see it here http://jsfiddle.net/n2f4m/27/ – Peeyush Feb 25 '13 at 14:18
  • @YosiefKesete As Peeyush said, there's just a typo with the id selector (in the question and my answer); I've changed that so it has an uppercase C. – Anthony Grist Feb 25 '13 at 14:24
  • @Anthony & Peeyush, thanks I see the jsfiddle code is working. In my real world project, though, it's not working. Maybe because my UL is contained in a div which is a child of another div. And I'm calling .show() and .hide() methods on the higher div. Is that a problem? – Yosief Kesete Feb 25 '13 at 14:55
  • @YosiefKesete No, visibility shouldn't be a problem. As long as the `#visibleCities` element actually exists (even if hidden) when the page loads, and `.on()` is called, it will be fine. – Anthony Grist Feb 25 '13 at 14:57
  • Thanks guys. It's sorted now. There was some blur event on a textbox that was hiding the higher div. Once I unhooked the blur event, it worked perfectly! – Yosief Kesete Feb 25 '13 at 15:29
1

use .on.

$('a').on('click',function(){
   //code here
});

Try

$('li a').on('click',function()
{
    //code here
});

$.each($.MyProject.cities, function (index, city)
{
    $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)")).appendTo($("#visiblecities"));
});
Dipesh Parmar
  • 27,090
  • 8
  • 61
  • 90
  • This is wrong. you didn't create a delegate event though you used `on`. **4 answers 4 wrong answers.** – gdoron Feb 25 '13 at 11:29
0

use live method instead of click 

 $.each($.MyProject.cities, function (index, city) {
        $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").live("click",function (event) { console.info("Anchor clicked!"); event.preventDefault(); return false; })).appendTo($("#visiblecities"));
    });
Sridhar Narasimhan
  • 2,643
  • 2
  • 17
  • 25
  • 1
    A thousand times ***NO!***. That function has been deprecated for months (since jQuery 1.7 was released), has been removed from jQuery entirely in version 1.9, and binds event handlers directly to the document. It's also intended to be called once to react to all elements, not called once per element. – Anthony Grist Feb 25 '13 at 11:26