Javascript 单击函数'；动态元素（主干）中的ajax调用后无法工作

我已在我的主干中创建了动态弹出窗口。单击按钮查看：

var Section = Backbone.View.extend({
className: 'sqs-frontend-overlay-editor-widget-section',
events:{
    'click .sqs--section--control__edit':           'Section_control'
},

initialize: function(){

},

render: function(){
    this.$el.append(_.template(_section).apply(this.options));
    return this.$el;
},

Section_control: function(){
    var me = this;   
    require(['View/Popup/Section_control'], function(_Section_control){
        var sec     = new _Section_control({popup: popup, sec: me.options.section});
        var popup   = new Popup({content: sec.render()});
    });
}
});
return Section;

在创建的动态弹出窗口中，我有一个带触发器的按钮：

    events:{
        'click .module-invert-mode':    'invert'
    },

    invert: function(e){
            console.log('hello');

            if(this.options.sec.hasClass('.module-invert')) {
                console.log('yse');
            }

            this.options.sec.toggleClass('module-invert');
            this.options.sec.trigger('invertChange');

    },

和按钮

invertChange

触发器：

    el.on("invertChange", function(e){
        var section = el.parents('section');
        var index   = section.index();
        var model   = collection.at(index);
        model.set(Helper.sectionToObj(section),{doReload: true})
    });

看看我在

invertChange

中调用的

{doReload:true}

函数：

    change: function(model, options){
        me = this;


        if( model._changing && options.doReload ) {
            $.ajax({
                url: 'wp-admin/admin-ajax.php',
                type: 'post',
                data: {
                    action: 'getShortcode',
                    shortcode: model.attributes.shortcode
                },
                success: function (data) {
                    //var section = $(data);
                    me.$el.find('section:eq(' + model.collection.indexOf(model) + ')').replaceWith(data);
                    me.add( model, model.collection );
                    //me.collection.add({shortcode: model.attributes.shortcode}, {at: section.index()});
                }
            });
        }
    },

---

问题是，当我创建动态弹出窗口并用

invertChange

trigger单击按钮时，ajax只工作一次，当我再次单击弹出窗口中的按钮时，ajax不工作（下一个ajax请求仅在关闭并再次创建动态弹出窗口时工作）。如何在不不断关闭和打开动态弹出窗口的情况下调用ajax？

问题在于，您的代码覆盖了子视图

me.$el.find('section:eq(' + model.collection.indexOf(model) + ')').replaceWith(data);

此侦听器无法处理事件

el.on("invertChange", function(e){

因为你的代码

this.options.sec.trigger('invertChange');

不会在正确的视图上触发事件，它在

replaceWith（）之后丢失了对此视图的引用。

作为解决方案，您需要解析

数据

对象，并将每个更改本地应用于元素

像这样的

$(data).find("* [attr]").each(function(i, el) {
    var $el = $(el),
        attr = $el.attr("attr"),
        $parent = me.$el.find('section:eq(' + model.collection.indexOf(model) + ')');
    if ($el.is("div, span")) {
        $parent.find('[attr=' + attr + ']').html($el.html());
    } else if ($el.is("img")) {
        $parent.find('[attr=' + attr + ']').attr("src", $el.attr("src"));
    } else if ($el.is("a")) {
        $parent.find('[attr=' + attr + ']').attr("href", $el.attr("href"));
    } else if (attr == "image_back_one") {
        $parent.find('[attr=' + attr + ']').attr("style", $el.attr("style"));
    } else {
        console.log($el);
    }
});

---

尝试在

replaceWith（）

@EugeneGlova尝试在

replaceWith（）或replaceWith（）之后添加
this.delegateEvents（）
内部
render（）
方法或内部成功，但对我无效(