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

jQuery .change() method does not work for dynamically created check-box

本文关键字：动态 创建 复选框 适用于 不适用 change 方法 jQuery      更新时间：2023-09-26

我必须动态地创建一个元素级联。

<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{
    }
});

很遗憾，我没有收到警报消息。

你可以使用 jquery on 来做到这一点：

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

这称为事件委派。

为了侦听已动态添加到 DOM 的元素上的事件，必须使用事件委托而不是直接绑定的事件处理程序。如 .on 的 jQuery api 文档中所述，"事件处理程序仅绑定到当前选定的元素;它们必须在代码调用 .on（）"时存在。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{
    }
});
相关文章：