Добрый день, столкнулся с такой проблемой:
Имеется блока "content" - <div class="content i-bem"><div class="content__wrap">...</div>
и его js:
modules.define(
'content',
['i-bem__dom', 'jquery', 'location'],
function (provide, BEMDOM, $, location) {
provide(BEMDOM.decl(this.name, {
onSetMod: {
js: {
inited: function () {
this._loader = this.findBlockInside('loader');
location.on('change', this._onChangeLocation, this);
}
},
loading: {
true: function () {
this._loader.setMod('progress', true);
},
'': function () {
this._loader.delMod('progress');
}
}
},
_loadIssues: function (options) {
var uri = location.getUri();
options.url = uri.getQuery();
this._sendRequest(options);
},
_onChangeLocation: function (e, state) {
var uri = location.getUri(),
options = {};
this._loadIssues(options);
},
_sendRequest: function (options) {
this._abortRequest();
this.setMod('loading', true);
this._xhr = $.ajax({
type: 'POST',
dataType: 'html',
url: options.url,
data: {
jsonContent: true,
},
cache: false,
context: this
}).fail(function () {
console.log(fail);
}).done(function (html) {
this._onSuccess(html);
})
.always(function () {
this.delMod('loading');
});
},
_abortRequest: function () {
this._xhr && this._xhr.abort();
},
_onSuccess: function (html, type) {
type = type || 'update';
this._render(html, type, 'wrap');
},
_render: function (html, addMethod, elem) {
var wrap = (elem && this.elem(elem)) || this.domElem;
BEMDOM[addMethod](wrap, html);
}
}));
});
Суть проблемы в том, что когда мы подгружаем какой-то блок через ajax (Пусть будет "base"), 1 раз live функция срабатывает, но если вдруг мы вызовем другой блок (base1) и затем заного base, тот функция live уже не срабатывает, в следствии чего, не срабатывает и функция. (Пример) :
modules.define('base',
['i-bem__dom', 'BEMHTML', 'jquery', 'events__channels', 'base-rows'],
function(provide, BEMDOM, BEMHTML, $, channels) {
provide(BEMDOM.decl(this.name, {
onSetMod: {
'js' : {
inited: function() {
}
}
},
_onScroll: function() {
$('.base-body').scrollbar();
$('.base-body').height($(window).height() - 195);
$('.base-body').scrollbar();
$(window).resize(function () {
$('.base-body').height($(window).height() - 195);
});
},
_getBaseUpdate: function() {
}
}, {
live: function() {
this.prototype._onScroll();
this
.liveBindTo('update', 'pointerclick', this.prototype._getBaseUpdate());
}
}));
}
);
Первый раз, когда мы подгружаем блок <div class="base i-bem">...</div>
, функция live срабатывает и вследствии чего, функцию _onScroll
он вызывает, он если мы вызовем другой блок через ajax, а потом заново base, то уже функция _onScroll
не срабатывает.
Подскажите, пожалуйста, как можно сделать, чтобы при каждом вызове через ajax, блок base, срабатывала автоматически функция _onScroll
.
@Index1 не уверен, что подскажу оптимальное решение, т.к. не знаю задачу целиком, но решить проблему можно, отказавшись от
live
-секции в пользуonSetMod -> js -> inited
. Т.к. метод в любом случае должен срабатывать сразу при вставке в DOM, это не должно быть проблемой.@tadatuta, спасибо. Работает.