jQuery .click() not triggering on links dynamically created

Question

0.00/5 (No votes)

See more:

Hello friends,
I trying to create dynamically footer and append to the table in MVC using following script

function createFooter(count) {
        var rowsPerPage = 5;
        var footer = "<tfoot><tr><td>";
        for (var i = 1; i < count + 1; i++) {
            footer = footer + "<a class='Paging' href=#>" + i + "</a> ";
        }
        footer = footer + "</td></tr></tfoot>";
        $('#DataTable thead').after(footer);
        return footer;
    }

I'm trying to click the tag, but its not working
I have used following script

 $('#DataTable tfoot a').click(function (e) {
            alert('hi');
            e.preventDefault();
)};

Any idea why it is not getting fired??
Thanks in advance

Posted 26-Aug-13 1:53am

dhage.prashant01

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thomas Daniels · Accepted Answer · 2013-08-26T02:17:00

Solution 1

Hi,

For jQuery 1.7+, use on[^] instead of click:

JavaScript

$('#DataTable tfoot').on('click', 'a', function(e) {
       alert('hi');
       e.preventDefault();
});

For older versions than 1.7, use delegate[^]:

JavaScript

$('#DataTable tfoot').delegate('a', 'click', function(e) {
       alert('hi');
       e.preventDefault();
});

Hope this helps.

Posted 26-Aug-13 2:17am

Thomas Daniels

Updated 26-Aug-13 2:27am

v3

Comments

dhage.prashant01 26-Aug-13 8:29am

.live() is working fine
why i need to use live() and what was problem with .click() in version jquery-1.4.4.js??
if possible please provide comments, that will help me to learn more..

Thanks

Thomas Daniels 26-Aug-13 8:30am

click simply doesn't work on dynamically generated elements. By the way, I updated my answer. If you use jQuery 1.4.3+, then use delegate instead of live, but if you use jQuery 1.7+, use on.

dhage.prashant01 27-Aug-13 3:00am

I have changes the Jquery version to jquery-1.7.2.js
I tried to use .delegate as well .on as per your solution, but they are not working.
But when i tried live, it is working fine.

why .delegate and .on not working??

Thomas Daniels 27-Aug-13 3:02am

Have you tried this:


$('#DataTable tfoot').on('click', 'a', function(e) {
       alert('hi');
       e.preventDefault();
});

dhage.prashant01 27-Aug-13 3:11am

Your solution did not work, but I modified the same as bellow

$(document).on('click', '#DataTable tfoot a', function (e) {
alert('hi');
e.preventDefault();
}

and it is working fine.

.live() too was working fine, then why use of .live() is not recommended??

Thomas Daniels 27-Aug-13 3:13am

.live() is not recommended because it is deprecated in jQuery 1.7.

dhage.prashant01 27-Aug-13 3:24am

I got the reason why it is deprecated
So in short, .click() does not work for dynamically created elements.
In such case you need to use .on or .delegate() depending on the version of jquery, to bind the events to the elements which is present or which will be created in the future.

Correct me if I'm wrong..
Thanks..!!

Thomas Daniels 27-Aug-13 3:33am

You're correct. Unfortunately, I've no idea why .live() is deprecated, but probably they found a better way, and so they created .delegate() and .on()

dhage.prashant01 27-Aug-13 4:49am

Reasons:
1. jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.
2. Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.
3. Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.

Thomas Daniels 27-Aug-13 4:50am

Interesting, thank you!

dhage.prashant01 27-Aug-13 5:13am

One more query..??
I have written code inside $(doucument).ready.(), .click() event should work in that case.
Because even if it is dynamically created , events are binded only after all elements are loaded.

Correct me if I'm wrong..

Thomas Daniels 27-Aug-13 5:19am

Yes, you're right!

dhage.prashant01 27-Aug-13 5:25am

Then why .click() event was not getting fire??

Thomas Daniels 27-Aug-13 5:40am

I think the .click() event is only attached to elements that already were added to the document when you attached the .click() event. .click() won't fire for elements added after you attached the .click() event.

dhage.prashant01 27-Aug-13 5:53am

Thanks sir for your time..!!
[b]Learned something new :) [/b]

Thomas Daniels 27-Aug-13 6:40am

You're welcome!