当其他函数创建的元素调用事件时，.click函数不起作用

Question

I have this function that create an element

function AddPayment(ID)
{
    showForm = $('#AddPaymentForm').html();    
    $('#divAJAX_'+ID).html(showForm);  

    $(".cancel").click(function(){ AddPayment(ID); });
}

Coming from this

<div id='AddPaymentForm'>    
       <span class='button' id='cancel' class='cancel' >Cancel</span>
</div>

I wanted that function to place the element in here

<div id='divAJAX_ID'></div>

I also wanted that function to create an onclick function on my span, but it isn't working. I guess the problem is coming from placing the

$(".cancel").click(function(){ AddPayment(ID); });

at the wrong placement. I've tried all the possible place but I can't still work this right.

What's wrong?

Answer 1

You have two class attributes on the same element. It should be something like:

class="button cancel"

instead of

class="button" id="whatever" class="cancel"

It is probably causing trouble to jQuery.

See how it start working on this fiddle: http://jsfiddle.net/pvNrg/2/

First, your question as the html:

<div id='AddPaymentForm'>
    <p>Coming from this</p>
</div>

<span id='cancel' class='cancel'>Cancel</span>

<p>I wanted that function to place the element in here</p>

<div id='divAJAX_ID'></div>

<p>I also wanted that function to create an onclick function on my span, but it isn't working. I guess the problem is coming from placing the ... at the wrong placement. I've tried all the possible place but I can't still work this right.</p>

<p>What's wrong?</p>

And the javascript:

$(function () {

    function AddPayment(ID) {
        showForm = $('#AddPaymentForm').html();
        $('#divAJAX_' + ID).html(showForm);
    }

    $(".cancel").click(function () {
        AddPayment('ID');
    });

});

Answer 2

For dynamically created elements ,You have to do event delegation

$(document).on("click", ".cancel" , function(event){
  alert($(this).text());
});

Answer 3

$("#AddPaymentForm,[id^=divAJAX_]").on("click", ".cancel" , function(event){
  alert($(this).text());
});

Attach the delegated event handlers only the list of containers you need to monitor (not the document) if you need to save performance (you don't need to monitor all the .cancel ). With this approach, the event does not have to bubble up more levels. If you have anther element that is parent of AddPaymentForm and all divAJAX_ . You could write like this:

$("#anotherContainer").on("click", ".cancel" , function(event){
      alert($(this).text());
    });

Answer 4

Use this code

function AddPayment(ID)
{
   var showForm = $('#AddPaymentForm').html();
   var container = $('#divAJAX_'+ID);

   container.html(showForm);
   container.find(".cancel").click(function(){ AddPayment(ID); });
}