CODEWITHSUNDEEP
clickjquery
Marty
Marty

Reputation: 39458

JQuery click() won't apply to anchor tag?

I am creating some thumbnails dynamically with JQuery, like this (in a loop):

var thumb = $('<a class="tinythumb"></a>');
thumb.append('<img src="' + productThumbnailList[i] + '" width="70" height="70" />');
thumbContainer.append(thumb);

Now I'm trying to add some functionality to these via JQuery's .click(), but I just can't get it working. I've never had trouble trying to do this before, there are no errors and there's nothing that I can see from my point of view that is incorrect.

I tried this simple .each() to see what would happen. Funnily enough, the rel attribute is being updated, but there's still no .click() functionality (alert never performed).

$("div#thumbcontainer a").each(function()
{
    $(this).attr("rel", "works");
    $(this).click(function()
    {
        alert('never called');

    });
});

This is the page I'm trying to work with:

http://burwell.businesscatalyst.com/catalogue/containmentscreen/Enviroguard#

Here's the entire JavaScript which probably has something relevant in it that's missing above:

// Properties
var thumbContainer = $("div#thumbcontainer");
var str = thumbContainer.html();
var productThumbnailList = str.split(';');

// Clear thumbContainer of junk HTML
thumbContainer.html("");


// Create thumbnails
if(productThumbnailList.length > 1)
{
    for(var i = 0; i<productThumbnailList.length; i++)
    {
        var large = Math.round(i/2) * 2 == i ? false : true;

        // create thumbnail
        if(!large)
        {
            var thumb = $('<a class="tinythumb"></a>');
            thumb.append('<img src="' + productThumbnailList[i] + '" width="70" height="70" />');
            thumbContainer.append(thumb);
        }
    }

    $("div#thumbcontainer a").each(function()
    {
        $(this).attr("rel", "works");
        $(this).click(function()
        {
            alert('never called');

        });

    });
}

Adding an onclick="someFunc()" parameter to the <a> tag makes it call the function fine..

Upvotes: 0

Views: 1814

Answers (4)

Pavan
Pavan

Reputation: 4329

Since you are creating the anchor tag dynamically, use "on" to attach click event handler

$('#thumbContainer').on("click","a", function(){ 
  alert("will work now"); 
});

http://jsfiddle.net/SUudh/23/

If you are using older version of jquery, use live() or delegate().

http://api.jquery.com/live/

Upvotes: 0

nbrooks
nbrooks

Reputation: 18233

The correct way to handle delegated events with jQuery is to use .on. Basically, when you add elements dynamically, they don't yet actually exist at the time you bind the handler. So instead you bind the function to a static ancestor element of the new one — one which does exist when you're binding the handler, and let the event 'bubble' up, and handle it there.

Code-wise, this is what you end up doing:

Get rid of all of this.

$("div#thumbcontainer a").each(function()
{
    $(this).attr("rel", "works");
    $(this).click(function()
    {
        alert('never called');
    });
});

Replace it with this.

// $('#thumbcontainer a').attr('rel', 'works'); chain this directly if needed

$("#thumbcontainer").on('click', 'a', function(e)
{
    e.preventDefault(); // prevent the click from following link
    alert('this gets called!');
});

Upvotes: 0

Rafay
Rafay

Reputation: 31033

you dont have to attach the click handler in the each loop try delegate (out side the loop ofcourse)

$("div#thumbcontainer").delegate("a","click",function(e){
        alert('never called'); /should be called

    });

Upvotes: 1

Naren Sisodiya
Naren Sisodiya

Reputation: 7288

there is a syntax error in your code add ) to end of code 

$("div#thumbcontainer a").each(function()
{
    $(this).attr("rel", "works");
    $(this).click(function()
    {
        alert('never called');

    });
})

Upvotes: 0

Related Questions