Javascript 。当事件由另一个函数创建的元素调用时，单击“函数不工作”

我有一个创建元素的函数

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>

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

---

怎么了？

对于动态创建的元素，您必须执行以下操作

如果需要保存性能（不需要监视所有

。取消
），则仅将需要监视的容器列表（而不是文档）附加到委派的事件处理程序。通过这种方法，活动不必冒出更多的气泡。如果您有另一个元素是
AddPaymentForm
和所有
divAJAX
的父元素。你可以这样写：

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

使用此代码

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

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

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

class="button cancel"

而不是

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

这可能会给jQuery带来麻烦

看看它是如何在这把小提琴上开始工作的：

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

}))
 你能把它摆弄一下吗？这会有很大帮助。我对事件处理程序中的
AddPayment（ID）
感到困惑。单击“取消”将基本覆盖现有表单，即重置每个字段的值（我假设您在
#AddPaymentForm
中有更多元素）。这就是你想要做的吗？
，这里的ID是动态的还是静态的，因为我看到类似于
$（'#divAJAX'+ID）.html（showForm）（是“#divAJAX_ID”）@FelixKling我在AddPayment（ID）函数中有条件。我只是在这里简化了它，这样它就可以很容易理解。出于好奇，为什么是-1（谁做的）？这不是一个坏问题，是吗？在寻求帮助之前，OP应该更努力地抓住双“类”吗？我不明白…OP并没有将数据设置为$（'AddPaymentForm'），并将数据设置为$（'divAJAX'+ID），这是一个动态ID。哦，greate@jaywalking101我没有注意到我在不同的位置包含了两个类。我只是简单地把它们放在同一个支架上就可以了。谢谢！很好的理解，尽管您的代码示例没有达到与OP相同的效果。他们使用事件处理程序中的
AddPayment
函数中的
ID
，而您使用的是字符串
'ID'
@iovor-santos：此代码还创建了一个
。取消
，并插入
$（'#divAJAX'+ID）
。我认为
$（'#divAJAX'+ID）
中的
.cancel
不起作用。有问题吗？@FelixKling是的，我不知道ID参数应该从哪里来。但它将是一个字符串（或数字），对吗？连接，然后成为id（字符串）。对不对？我只是用了“字符串”来简化。不管怎么说，问题出在别的地方
function AddPayment(ID)
{
   var showForm = $('#AddPaymentForm').html();
   var container = $('#divAJAX_'+ID);

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

class="button cancel"

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

<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>

$(function () {

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

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