Jquery how to bind click event on dynamically created elements?

Question

I tried the below code but it is not working

<script type="text/javascript">
    $(document).ready(function () {
        $('body').on('click', '.pg_previous,.pg_next', function () {
            jQuery("img.lazy").lazy({});
            alert('ddsda');
        });
    });
</script>

Jquery 1.9.1

This fiddle works without the `lazy` call, maybe look there, or move the alert ahead of the `lazy` call. http://jsfiddle.net/5SyS3/ — Jason P, Jul 09 '13 at 21:13
+1 for using body as selector instead of class selector (for dynamically created element) — khaled_webdev, Mar 15 '14 at 17:56
Here's a detailed article on how to bind click event for dynamic element http://goo.gl/zlEbnv — Satinder singh, Aug 17 '15 at 05:15

score 11 · Accepted Answer · answered Jul 09 '13 at 21:08

11

here try this:

<script type="text/javascript">
$(function(){
    $('body').on('click', '.pg_previous,.pg_next', function () {
        jQuery("img.lazy").lazy({});
        alert('ddsda');
    });
});
</script>

answered Jul 09 '13 at 21:08

RicardoE

1,665
6
24
42

This did it for me! Thank you! Attaching the click event to the parent element and selecting its children is the most efficient way. – Stephen Rodriguez Jul 11 '14 at 14:12
2

both are equivalent, but for this particular version of jQuery I often found the long version doesn't work, and the shortcut do. – RicardoE Oct 27 '14 at 20:40

score 3 · Answer 2 · answered Jul 09 '13 at 21:06

3

You forgot the DOM ready handler

Encase your code inside the ready handler and should work fine unless you have any errors showing up in our console.

$(function() {
    // Your code here
});

answered Jul 09 '13 at 21:06

Sushanth --

55,259
9
66
105

1

ok i believe another code cancels default action so it cancels binded action too thanks – Furkan Gözükara Jul 09 '13 at 21:11

Jquery how to bind click event on dynamically created elements?

2 Answers2

Linked

Related