Question

在jQuery 3.2.1中，如果我在加载函数之后构建复选框，则单击复选框时，单击功能不起作用。

如果我在测试之前建立了该复选框，那么它将起作用！

如何编码它，以便在动态构建加载功能中的复选框后，单击功能可以正常工作？

request.user

Answer 1

您在document.ready上绑定了事件，然后在window.load上构建了控件，因此该控件将不起作用，因为事件已与现有控件绑定。如果要制作新控件，则需要在将控件添加到DOM之后添加它。

var identifiant = "dynamic",
    url = "www.google.com";
var counter = 1;
$(window).on('load', function() {
    dynamicControl();
});

function dynamicControl() {
    var id = identifiant + counter;
    $("#idcheckbox").append("<div class='custom-control custom-checkbox custom-control-inline'><input type='checkbox' class='custom-control-input' id=" + id + " value=" + url + "><label class='custom-control-label' for=" + id + ">" + url + "</label></div>");
    $("#" + id).on('change', function() {
        alert('dynamic alert')
    });
    counter++;
}
$(document).ready(function() {

    $("input[type='checkbox']").on('change', function() {
        alert("0000");
    });

    $("input[type='checkbox']").on('click', function() {
        alert("1111");
    });
    $("#Dynamic").on('click', dynamicControl);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="idcheckbox">
</div>
<input type='button' id='Dynamic' value='Add new checkbox'/>

jQuery：click function（）ready在加载函数后不起作用

1 个答案: