如何将事件绑定到刷新的 DOM 元素答案

【问题标题】：How to bind events to DOM elements that get refreshed如何将事件绑定到刷新的 DOM 元素
【发布时间】：2013-05-22 14:49:36
【问题描述】：

我现在有一个 BackboneJS 站点，但遇到了问题。我有一个使用 jQuery.click() 事件处理程序的主干视图。现在，我在 $(document).ready() 函数中全局设置了处理程序。但是，我意识到如果我加载使用第一个处理程序的页面，那么一切正常，但是如果我更改页面（更改主干显示的视图）然后返回原始页面（刷新使用处理程序的 DOM ) 然后不再触发事件。我该如何处理？这一定是很多人遇到的问题，所以我猜 Backbone 有办法解决这个问题。

否则，我的计划是在呈现视图后调用一个函数来重置处理程序。这是最好的方法还是主干有办法处理这个问题？

$(document).ready(function(){
    $('.section-pulldown').on('click', function(){
        var el = $(this).next();
        var par = $(this).parent();
        var arrow = $(this).children('img');

        if (el.css('display') == 'none') {
            el.css('padding-bottom', '50px');
            arrow.attr('src', 'images/downarrow.png');
            par.css('box-shadow', '0px 0px 15px 3px #A8A8A8 inset');
            $(this).next().slideToggle(700);

        }
        else {
            $(this).next().slideToggle(700, function(){
                el.css('padding-bottom', '0px');
                par.css('box-shadow', '2px 2px 15px 2px #CCCCCC inset');
                arrow.attr('src', 'images/uparrow.png');
            });

        }

    });
})

【问题讨论】：

我觉得你需要delegated events
哦，委托只是意味着有一个选择器......我已经有了。看看我的更新
不，它没有。非常仔细阅读该文档。他们提到的selector 不是用于创建jQuery 对象的那个。值得注意的是，委托事件有两个选择器，一个用于“存储”它们的元素，另一个用于“过滤”来自第一个元素的后代的事件。

标签： javascript jquery backbone.js

【解决方案1】：

尝试类似：

$(function() {
    $(document).on('click', '.section-pulldown', function(e) {
        var el = $(this).next();
        var par = $(this).parent();
        var arrow = $(this).children('img');

        if (el.css('display') == 'none') {
            el.css('padding-bottom', '50px');
            arrow.attr('src', 'images/downarrow.png');
            par.css('box-shadow', '0px 0px 15px 3px #A8A8A8 inset');
            $(this).next().slideToggle(700);

        }
        else {
            $(this).next().slideToggle(700, function(){
                el.css('padding-bottom', '0px');
                par.css('box-shadow', '2px 2px 15px 2px #CCCCCC inset');
                arrow.attr('src', 'images/uparrow.png');
            });

        }

    });
})

见jQuery .on as a delegate

【讨论】：