Javascript - Difference between $(document).on(“click”, “selector”, function …); and $(“selector”).on(“click”, function …);

Question

What is difference between these two codes ?

$(document).on(\'click\', \'.close_modal_window\', function(){
        alert(\"window closed\");
    });
         


        

Answer 1

Above are two examples with button's click event:

click me

Look the difference.

---

Here is an example with delegation:

http://jsfiddle.net/xtz1np6d/

and here one without delegation:

http://jsfiddle.net/ketme18a/

---

As you can see, elements created dinamically, aren't in the context when the function was created, and for that, they don't have any function assigned.

---

I super recommend this lecture: Understanding Event Delegation

---

But be cautious, had one time that I used event delegation and it crushed my niceScroll-plugin in iPad.