CODEWITHSUNDEEP
javascriptjqueryhyperlinkonclick
Raptrex
Raptrex

Reputation: 4105

jquery onclick is not working

I am dynamically creating a link, and I am trying to add a click function to it. The links are being added, but the click function is not working. I dont see anything in the console, nor do I get an alert.

var section = $('<section></section>').append('<a class="link" href="#"></a>');
section.find('a.link').attr('title', post.data.permalink)
                      .text(post.data.title)
                      .click(function()
                      {
                           console.log("function");
                           alert("hi");
                           getThread(post.data.permalink);
                       });
items.push(section[0].outerHTML);
$('#posts').empty().append(items.join(''));

Upvotes: 0

Views: 578

Answers (4)

Bojangles
Bojangles

Reputation: 101473

One of the most common mistakes with jQuery. When dynamically adding elements, normal jQuery event handlers don't work, so you need to use .live() to be able to bind events to dynamic elements. This should work:

var section = $('<section></section>').append('<a class="link" href="#"></a>');
section.find('a.link').attr('title', post.data.permalink)
                      .text(post.data.title)
                      .live("click", function()
                      {
                           console.log("function");
                           alert("hi");
                           getThread(post.data.permalink);
                       });
items.push(section[0].outerHTML);
$('#posts').empty().append(items.join(''));

Notice the use of .live("click", function() { ... }); there? That should solve your problem.

Upvotes: 3

numbers1311407
numbers1311407

Reputation: 34072

You don't need to manually join the HTML.

You're binding the event to an element, then taking the HTML of that element and just concatenting it into a string, which is then in turn inserted into the DOM as new elements when you append to #posts.

items is not defined here, but I'm going to go out on a limb and assume it's an array of generated <section>s and etc?

If that's the case, I might be missing something you're trying to do here, but it seems you could just eliminate the whole concatention of HTML and simply append the items array, which would preserve the bound click event.

// Push the element, don't stringify it.
items.push(section);

// Then simply append the "items" elements.
$('#posts').empty().append(items);

Sure, live would probably solve the problem as well, but you certainly can bind events to generated elements then insert them into the DOM. What you cannot do is bind an event to an element then print out it's HTML and insert that into the DOM. Any binding you made with the original element is lost.

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117314

If running this in IE be sure that developer-tools (F12 )are present , otherwise console will be undefined and the call of console.log() will force an error and stops the function from executing.

What else: outerHTML is IE-only, you'll better forget it and never use it.

Upvotes: 0

BZink
BZink

Reputation: 7947

That looks okay. You may try using each() to iterate over that collection. I'm not sure if you can bind even handlers to a jQuery collection like that. 

section.find('a.link').each(function(){
    $(this).attr('title', post.data.permalink)
                      .text(post.data.title)
                      .click(function()
                      {
                           console.log("function");
                           alert("hi");
                           getThread(post.data.permalink);
                       });


});

Upvotes: 0

Related Questions