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

Javascript 如何将事件绑定到刷新的DOM元素,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我现在有一个BackboneJS站点,但遇到了一个问题。我有一个主干视图使用jQuery.click()事件处理程序。现在,我已经在$(document).ready()函数中全局设置了处理程序。但是,我意识到,如果我首先加载使用处理程序的页面,那么一切都正常,但是如果我更改页面(更改主干显示的视图),然后返回到原始页面(刷新使用处理程序的DOM),那么事件就不会再触发。我该怎么处理?这肯定是很多人遇到的一个问题,所以我想主干网有办法解决这个问题 否则,我的计划是在呈现视图后调用函数来重置处理程

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

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

$(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');
            });

        }

    });
})
尝试以下方法:

$(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');
            });

        }

    });
})
请参见

尝试以下方法:

$(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对象的选择器。值得注意的是,委派事件有两个选择器,一个用于“存储”它们的元素,另一个用于“过滤”来自第一个元素的后代的事件。。。我已经有了。看看我的更新,不,它没有。请仔细阅读该文档。他们提到的
选择器
不是用于创建jQuery对象的选择器。值得注意的是,委派事件有两个选择器,一个用于“存储”它们的元素,另一个用于“过滤”来自第一个元素的后代的事件。