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函數o我的跨度，但它不工作。 我想這個問題是由放置

$(".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); }); 
}