在动态元素（骨干）中进行ajax调用后，单击功能不起作用

debugcn 发表于 Dev

20yco

我已经通过单击按钮在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})
    });

看一下{doReload: true}我调用的函数invertChange：

    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？

尤金·格洛娃（Eugene Glova）

您具有覆盖子视图的代码的问题

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

而且此侦听器无法处理事件

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

因为你的代码

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

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

作为解决方案，您需要解析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);
    }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。