javascript单击事件的问题_Javascript_Jquery

javascript单击事件的问题

javascript jquery

javascript单击事件的问题,javascript,jquery,Javascript,Jquery,我正在使用javascript创建一个日历应用程序。日历视图是使用javascript dom元素显示的，我为该元素创建了一个通用方法，并调用该方法来显示更新的日历视图。当我点击某个特定日期时，我需要更新日历的显示，但在触发更新事件时，日历只会更新一次。我已经创建了一个类似的演示，并在下面提供相同的内容 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0

我正在使用javascript创建一个日历应用程序。日历视图是使用javascript dom元素显示的，我为该元素创建了一个通用方法，并调用该方法来显示更新的日历视图。当我点击某个特定日期时，我需要更新日历的显示，但在触发更新事件时，日历只会更新一次。我已经创建了一个类似的演示，并在下面提供相同的内容

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $(document).ready(() => {
            this.show();

            for (let i = 0; i < 10; i++) {
                $('#li-' + i).click(() => {
                    alert(i);
                    this.show();
                });
            }
        });

        function show() {
            let elem = document.getElementById('body');
            elem.innerHTML = "";

            let ul = document.createElement('ul');
            for (let i = 0; i < 10; i++) {
                let li = document.createElement('li');
                let text = document.createTextNode(i);
                li.appendChild(text);
                li.setAttribute('id', 'li-' + i);
                li.style.cursor = 'pointer';
                ul.appendChild(li);
                elem.appendChild(ul);
            }
        }
    </script>
</head>
<body>
    <div id="body"></div>
</body>
</html>

在本例中，当我单击“li”元素时，将触发单击事件并显示警报框。此外，还会调用“show”方法来更新视图。但是，当单击另一个“li”元素时，事件不会被触发。

旁注：我肯定会重构您的代码

问题是：this.show实际上正在重新绘制id为body的整个div

重新绘制元素并删除以前的现有元素将取消注册不会自动注册的单击事件。在当前场景中，仅在渲染事件之后注册一次事件，但在再次渲染div之后不会再次注册事件

解决方案是通过将for移动到show函数中，重新注册事件

$document.ready=>{ 这个节目； }; 功能表演{ 让elem=document.getElementById'body'； elem.innerHTML=；设ul=document.createElement'ul'；对于设i=0；i<10；i++{ 让li=document.createElement'li'；让text=document.createTextNodei；李。文本；设置属性'id'，'li-'+i； li.style.cursor='pointer'； ul.appendChildli；埃勒姆·阿佩杜尔； } 对于设i=0；i<10；i++{ $'li-'+i.click=>{ alerti；这个节目； }; } }

旁注：我肯定会重构你的代码

问题是：this.show实际上正在重新绘制id为body的整个div

解决方案是通过将for移动到show函数中，重新注册事件

当您再次单击任何要调用show的元素时，将再次创建DOM并取消绑定因此，您可以绑定到ie创建的文档，如果新DOM创建了该文档，那么它将自动绑定

    $(document).on("click", 'body #li-' + i, function(event){
         alert(i);
         this.show();
    }.bind(this));

当您再次单击任何要调用show的元素时，将再次创建DOM并取消绑定因此，您可以绑定到ie创建的文档，如果新DOM创建了该文档，那么它将自动绑定

    $(document).on("click", 'body #li-' + i, function(event){
         alert(i);
         this.show();
    }.bind(this));

令人惊叹的非常感谢！没有在show方法中保持循环的想法。非常感谢。只是一个旁注：每次发生变化时都考虑重新渲染：现在，您只有10行的迭代。然而，想想如果元素突然变为1000会发生什么。考虑改变现有的DOM元素，而不是重新呈现它们，这将是一种更好的方法；我已经考虑过了。但在开发日历视图时，这是不可能的。假设我单击下一个月的某个日期，则整个日历正文需要使用所选月份的视图进行更新。@Raj好的，如果这是方法，那么它目前就可以了@拉杰，你可以参考我的要求，即使这个答案是正确的！非常感谢！没有在show方法中保持循环的想法。非常感谢。只是一个旁注：每次发生变化时都考虑重新渲染：现在，您只有10行的迭代。然而，想想如果元素突然变为1000会发生什么。考虑改变现有的DOM元素，而不是重新呈现它们，这将是一种更好的方法；我已经考虑过了。但在开发日历视图时，这是不可能的。假设我单击下一个月的某个日期，则整个日历正文需要使用所选月份的视图进行更新。@Raj好的，如果这是方法，那么它目前就可以了@Raj你可以参考我的要求，即使这个答案是正确的，你确定它会起作用吗？据我所知，这是

不会自动注册事件。是的，我刚才试过进行交叉验证。它无法识别方法显示。你确定它会起作用吗？据我所知，这不会自动注册事件。是的，我刚刚尝试过交叉验证。它没有识别出显示的方法。