動態添加的點擊事件無效

動態添加checkbox按鈕後點擊事件無效

<div class="row cl">
		 <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>答案：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="checkbox" value="0" placeholder="" class="wqrqwrwq1"  name="decideAnswer">×
			<input type="checkbox" value="1" placeholder="" class="wqrqwrwq1"  name="decideAnswer">√
		</div>
</div> 

$(":checkbox").click(function(){
	alert(1);
	var classname = $(this).attr('class');
    $("."+ classname).prop("checked",false);
    $(this).prop("checked",true);
});

如果不是動態添加，以上代碼是可以實現點擊checkbox框是可以彈出提示框的，但是動態添加的checkbox元素不行。

原因：

是因爲這些動態加載的這些HTML頁面（二），是在列表數據頁面的HTML元素（一），css,js代碼加載完後，再添加的HTML元素，在瀏覽器解析到（一）的頁面元素時， 解析到js的這些綁定標籤事件的js代碼（上面的JS、jq代碼）的時候，這些綁定事件的標籤元素還沒有生成，（因爲js代碼加載完後，纔會有這些綁定事件的標籤），所以這些JS 代碼的綁定的事件，根本就沒有綁定到這些動態加載的標籤上，所以事件不會觸發。

解決方法：

類似動態加載的HTML元素需要綁定事件可以用 jQuery 事件 - delegate() 方法；

以下爲參數說明：

定義和用法

delegate() 方法爲指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。

使用 delegate() 方法的事件處理程序適用於當前或未來的元素（比如由腳本創建的新元素）。

語法

$(selector).delegate(childSelector,event,data,function)

參數	描述
childSelector	必需。規定要附加事件處理程序的一個或多個子元素。
event	必需。規定附加到元素的一個或多個事件。 由空格分隔多個事件值。必須是有效的事件。
data	可選。規定傳遞到函數的額外數據。
function	必需。規定當事件發生時運行的函數。

所有上面的點擊checkbox實現單選並彈出提示框的功能實現如下：

$("body").delegate(":checkbox","click",function(){
	var classname = $(this).attr('class');
	$("."+ classname).prop("checked",false);
	$(this).prop("checked",true); 
});