javascript - 当由另一个函数创建的元素调用事件时，.click 函数不起作用

Question

我有这个创建元素的功能

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

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

从此而来

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

我希望该功能将元素放在此处

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

我还希望该函数在我的跨度上创建一个 onclick 函数，但它不起作用。我想问题出在放置

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

在错误的位置。我已经尝试了所有可能的地方，但我仍然无法正常工作。

怎么了？

Answer 1

您在同一个元素上有两个类属性。它应该是这样的：

class="button cancel"

代替

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

它可能会给 jQuery 带来麻烦。

看看它是如何开始在这个小提琴上工作的：http: //jsfiddle.net/pvNrg/2/

首先，您的问题是 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>

和javascript：

$(function () {

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

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

});

Answer 2

对于动态创建的元素，你必须做事件委托

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

Answer 3

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

如果您需要保存性能（您不需要监视所有），则仅将委托的事件处理程序附加到您需要监视的容器列表（而不是文档.cancel）。使用这种方法，事件不必冒泡更多级别。如果您有另一个元素，它是AddPaymentFormand all的父元素divAJAX_。你可以这样写：

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

Answer 4

使用此代码

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

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