在动态填充列表(在运行时)后，即使我添加了委托侦听器，我也必须单击两次才能触发点击事件

当我填充列表（例如未排序的列表）时（在运行时：例如ajax），即使我添加了委托侦听器，第一键点击都无法使用。仅在第二次单击之后，该事件才会触发。有人知道为什么吗？怎么了？

无委会

<body>
<input type="text" id="my-textbox"/>
<ul id="list"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    var sayHello = function (e) {
        e.preventDefault();
        alert("Hi");
    };
    var fillList = function (e) {
        var text = $(this).val();
        var $ul = $('#list').empty();
        for (var i = 0; i < text.length; i++) {
            var $a = $('<a href="#">').text("List item " + i).on("click", sayHello);
            var $li = $('<li>').append($a);
            $ul.append($li);
        }
    };
    $(document).ready(function () {
        $("#my-textbox").on("keyup, change", fillList)
            .bind("input propertychange", fillList);
    });
</script>
</body>

with委托（仅范围为差异）

    var fillList = function (e) {
        var text = $(this).val();
        var $ul = $('#list').empty();
        for (var i = 0; i < text.length; i++) {
            var $a = $('<a href="#">').text("List item " + i); // here edited
            var $li = $('<li>').append($a);
            $ul.append($li);
        }
    };
    $(document).ready(function () {
        $("#list").on("click", 'a', sayHello); // and here edited
        $("#my-textbox").on("keyup, change", fillList)
            .bind("input propertychange", fillList);
    });

再次：在两种情况下，首次点击都不起作用。第二次单击后，它起作用。

好的，已解决。我认为您使用 bind("input propertychange")确定是否粘贴了剪贴板的文本，触发了 change（在文本框上）。因此，如果您使用bind("input propertychange")，则使用on("keyup, change")是多余的。

    $("#my-textbox").bind("input propertychange", fillList); // so this is enough; this works

相关内容

最新更新

热门标签：