Question

我使用jquery动态附加一些html代码（包含输入类型复选框）。数据完美地显示了类和id 但是，当我尝试使用jquery访问那些输入标签（输入类型复选框）时，却没有发生。为什么？有什么解决办法吗？

我的HTML

<div id="divData"></div>

我的脚本

<script>
    function RollBackVehicles() {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetData", "Controller")',
            async: false,
            data: { ID: 1235 },
            dataType: "json",
            success: function (d) {
                var c = "";
                for (var b = 0; b < d.length; b++) {
                    c += "<p> <input type='checkbox'class='clscheck' id='" + d[b].Id + "'/> <span>" + d[b].Value + "</span>"
                }
                $("#divdata").html(c);
            }
        });
    }
    $(".clscheck").change(function () {
        alert("Changed");
    });

</script>

Answer 1

尝试在添加到dom的任何新元素上使用此方法，因为您要向DOM添加动态元素

   $(document).ready(function () {
    var data="<p> <input type='checkbox'class='clscheck' id='checkData'/> <span>Test</span>";
    $("#divdata").html(data);
 });
   
   $("#divdata").on("change", ".clscheck", function(){
         alert("Changed");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divdata"></div>

Answer 2

尝试一下，

$(document).ready(function () {
     $(document).on('change','.clscheck', function () {
        alert("change");
     });
 });

Answer 3

由于元素是动态添加的，因此需要使用静态元素的引用。您的代码可能看起来像这样。

$("#divData").on('click', '.clscheck',function () {
    alert("Changed");
});

Answer 4

对于文档加载后动态添加的任何Dom对象，您必须使用纯JavaScript事件处理程序绑定。

符号示例：

object.addEventListener("change", myScript);

jQuery单击功能不适用于动态添加的字段

4 个答案: