Question

目前我有 350 + 事件，例如

$(document).on('click','.removable-init',function(){});

我发现性能问题，某些点击事件会延迟几分之一秒。但我的整个网站是用ajax动态生成的。

我想知道如何处理这些问题。

例如，我的网站的流程如下所示。

ONLOAD

<html>
<head></head>
<body>
<div id="main">
   <button id="clickme"></button>
   <button id="clickme2"></button>
</div>
</body>
</html>

点击： #clickme

 $('#main').append('<div id="anothermain"><button id="anotherclick"></button></div>');

点击： #clickme2

 $('#main').append('<div id="anothermain4"><button id="anotherclick4"></button></div>');

点击： #anotherclick

 $('#anothermain').append('<div id="anothermain2"><button id="anotherclick2"></button></div>');

点击： #anotherclick2

 $('#main').append('<div id="mainsibling"><button id="clicksibling"></button></div>');

点击： #anotherclick4

 $('#main').append('<div id="anothermain5"><button id="anotherclick2"></button></div>');

上面只是一个示例，显示点击事件很大（350+），并在网站的不同部分动态创建。

所以我想知道如何在不使用委托文档的情况下处理这些问题。？

当屏幕上有很多元素时，有时关注文本框，下拉单击等会很慢做出反应

Answer 1

一种解决方案可能是在创建新元素后绑定点击。

不是在页面加载时附加所有事件处理程序，而是可以在单击现有元素时创建元素，并在其自身处理新单击元素的单击。像这样：

<html>
<head></head>
<body>
<div id="main">
   <button id="clickme"></button>
</div>
</body>
</html>

JS：

$(function() {
    $("#clickme").on('click', function(e) {
        var $anotherMain = $('<div id="anothermain"><button id="anotherclick"></button></div>');
        $('#main').append($anotherMain);
        //handle click on anotherMain
        $anotherMain.on('click', function(e) {
            var $anotherMain2 = $('<div id="anothermain2"><button id="anotherclick2"></button></div>');
            $('#main').append($anotherMain2);
            //handle click on anotherMain
            $anotherMain2.on('click', function(e) {
                // add anotherMain3 and so on.
            });
        })
    })
});

可以拉出并重复使用创建新元素和绑定点击的常用功能。

所有事件代表团到文件

1 个答案: