如何处理将元素添加到页面的事件？

Question

I have an app where clicking a link brings up a modal. In the modal is a form. I need to monitor for that form's submission.

I'm attaching a click handler in my JS like so:

$('.vex-dialog-form :submit').click (event) ->
    alert "hi"

That alert isn't firing, I believe it's because I need to attach some kind of event handler for that modal loading then put the submit event inside of that.

Any suggestions on how to go about this?

Answer 1

you need event delegation for dynamically added DOM. use .on() :

 $('.vex-dialog-form').on('click',':submit',function(){
   alert("hi");
 });

if parent .vex-dialog-form is also getting added dynamically, then use:

 $(document).on('click','.vex-dialog-form :submit',function(){
   alert("hi");
 });

Answer 2

Try this way:

$(document).on('click', '.vex-dialog-form :submit', function(){
    alert('hi');
});

In this case document is waiting for click and after it gets clicked, jQuery finds out whether your submit button is clicked or not