在动态元素( Backbone )中 AJAX 后,Click函数不起作用

ffx8fchx  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(126)

我已经在我 Backbone.js 中创建了动态弹出窗口。单击按钮查看:

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而不不断关闭和打开我的动态弹出窗口?

myss37ts

myss37ts1#

问题是您的代码覆盖了子视图

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

相关问题