Question

我必须动态创建一系列元素。

<label class="control-label col-sm-2 text-primary" for="prix">Prix:</label>      
<div class="col-sm-10"> 
    <select  name="prix" id="prix">
        <option value="0">Type de prix</option>
        <option value="1">Gratuit</option>
        <option value="2">Montant</option>
        <option value="3">Echange</option>
        <option value="4">Prix à discuter</option>
        <option value="5">Prix n'est pas d'application</option>
    </select>
</div>
<div id="select_prix" ></div>
<div id="select_offre" ></div>

当我选择选项value="2"时，必须在div id="select_prix"中插入一个复选框

所以我使用jquery：

$('#prix').on('change', function() {
    if ($(this).val() < 2) {
        $("#select_prix").empty();
    }  

    var stroffre  ='<label class="col-sm-2 control-label text-primary">Offre ?                                  </label>';
    stroffre +='<div class="checkbox col-sm-10">';
    stroffre +='<label class="checkbox-custom" data-initialize="checkbox">';
    stroffre +='<input class="sr-only" id="chkoffre" type="checkbox" value="">';
    stroffre +='<span class="checkbox-label">Autoriser les  offres</span>';
    stroffre +='</label> </div>';

    if ($(this).val() == 2) {
        $("#select_prix").append(stroffre);
    }
});

确定。出现复选框，我得到的是：

复选框'Autoriser les offres'

现在，当我选中复选框时，我想在div id="select_offre"

中插入新的行输入

我为此制作了一个新的jQuery代码：

$("#chkoffre").change(function () {
    alert( 'CheckboxOffre' ); // or $(this).val()
    if($(this).is(":checked")) {

    }else{

    }
});

不幸的是，我没有收到警告信息。

Answer 1

您可以使用jquery on执行此操作：

$("#chkoffre").on("change", function(){
    alert( 'CheckboxOffre' ); // or $(this).val()
   if($(this).is(":checked")) {

   }else{

   }
});

这称为事件委托。

Answer 2

为了侦听已动态添加到DOM的元素上的事件，您必须使用事件委托而不是直接绑定的事件处理程序。如.on的jQuery api文档中所述，＆＃34;事件处理程序仅绑定到当前选定的元素;它们必须在您的代码调用.on（）＆＃34;时存在。 http://api.jquery.com/on/ .change和其他直接绑定事件类型都是如此。

所以这个：

$("#chkoffre").change(function () {

必须更改为：

$("#select_prix").on("change", "#chkoffre", function () {

这是在应用于您的代码时演示此修补程序的小提琴： https://jsfiddle.net/uuvcyf9o/ 这是完整的代码：

$('#prix').on('change', function() {
    if ($(this).val() < 2) {
        $("#select_prix").empty();
    }  

    var stroffre  ='<label class="col-sm-2 control-label text-primary">Offre ?</label>';
    stroffre +='<div class="checkbox col-sm-10">';
    stroffre +='<label class="checkbox-custom" data-initialize="checkbox">';
    stroffre +='<input class="sr-only" id="chkoffre" type="checkbox" value="">';
    stroffre +='<span class="checkbox-label">Autoriser les  offres</span>';
    stroffre +='</label></div>';

    if ($(this).val() == 2) {
        $("#select_prix").append(stroffre);
    }
});

$("#select_prix").on("change", "#chkoffre", function () {
    alert( 'CheckboxOffre' ); // or $(this).val()
    if($(this).is(":checked")) {
    }else{
    }
});

jQuery .change（）方法不适用于动态创建的复选框

2 个答案: