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>

我还希望该功能在我的span上创建一个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

对于动态创建的元素，您必须执行event delegation

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

Answer 3

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

如果需要保存性能（不需要监视所有.cancel），则仅将委派的事件处理程序附加到需要监视的容器列表（而不是文档）。通过这种方法，事件不必冒泡更多级别。如果您的花药元素是AddPaymentForm的父级和所有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); });
}

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

4 个答案: