動態添加復選框時，無法從組中選擇復選框的jQuery腳本起作用

Question

我正在使用以下jquery腳本來禁止用戶一次選擇多個相同名稱的復選框

 $("input:checkbox").click(function () {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

這是復選框

 <div class="ChekMarkWrap">
  <input id="chkFilm_4" type="checkbox" name="four" style="margin-left:2px;" /><br />film
 </div>

 <div class="ChekMarkWrap">
  <input id="chkTv_4" type="checkbox" name="four" /><br />tv
 </div>

 <div class="ChekMarkWrap">
  <input id="chkWeb_4" type="checkbox" name="four" /><br />web
 </div>

 <div class="ChekMarkWrap">
  <input id="chkStage_4" type="checkbox" name="four" /><br />stage
 </div>

在我動態添加一個新復選框之前，它工作得很好。我將上面的jquery腳本綁定到document.ready()

Answer 1

小提琴： http : //jsfiddle.net/3hcFp/2/

該方法僅綁定一次click事件，因此在該代碼運行之后添加的元素將不會綁定該事件。 您需要做的是改為設置一個偵聽器，如下所示：

$('body').on('click', 'input:checkbox', function () {
    // Do some stuff
}

在小提琴中，我將復選框包裝在form#exampleForm ，並用上面的示例替換了body 。

編輯：更新了小提琴與添加更多復選框的實時示例。

Answer 2

嘗試這樣：

$("body").on('click',input:checkbox,function () {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

添加新內容時，需要將其附加到DOM。

但是您可以將加載DOM之后未添加的父元素作為目標，以便能夠使用.on（）並向其引用/附加事件並傳遞選擇器，如我在代碼的第一行中所述。

Answer 3

您應該使用委托事件。 您的代碼正在document ready運行。 沒有什么可以綁定到新元素上。

$("your-form-selector").on('click', ':checkbox', function(){
//your code here.
});

Answer 4

您可以嘗試使用委托。 像這樣：

$(".ChekMarkWrap").delegate('click','input:checkbox',function () {
    //your functionality
});

供參考： jQuery文檔