我已经在我 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而不不断关闭和打开我的动态弹出窗口?
1条答案
按热度按时间myss37ts1#
问题是您的代码覆盖了子视图
并且此侦听器无法处理事件
因为您的代码
在正确的视图上不触发事件,它在
replaceWith()
之后丢失了对此视图的引用作为一个解决方案,您需要解析
data
对象,并将每个更改应用于本地元素像这样的东西