javascript - 在动态元素(Backbone)中调用ajax后，单击功能不起作用

Question

我通过单击按钮在 Backbone.view 中创建了动态弹出窗口:

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 触发器的按钮时，ajax 只能工作一次，当我再次单击弹出窗口中的按钮时，ajax 不起作用(下一个 ajax 请求仅当关闭并再次创建动态弹出窗口时才有效)。如何在不不断关闭和打开动态弹出窗口的情况下调用 ajax？

Answer 1

您的代码覆盖 subview 的问题

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

这个监听器无法处理事件

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

因为你的代码

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

不会在正确的 View 上触发事件，它在replaceWith()之后丢失了对此 View 的引用

作为解决方案，您需要解析您的 data 对象并将每个更改本地应用到元素

类似这样的事情

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