Возникла странная проблема с обработкой событий jQuery, из-за которой мои .triggers запускаются, но обработчики .on не реагируют.
Как правило, я бы сначала предположил, что элементы, которые я хочу отреагировать на триггер, не полностьюпока что настроен, но прежде чем запускать триггеры, я могу проверить элемент и увидеть, что обработчики действительно присутствуют.
Чтобы упростить некоторые другие функции, я недавно переместил некоторый код из установки обработчиков непосредственно в экземплярахобъект, вместо того, чтобы попробовать несколько комбинаций, пытаясь установить их в прототипе или в конструкторе объекта, который создается.Похоже, что именно здесь произошел разрыв, но я не могу понять, почему, поскольку объекты существуют, существуют обработчики, и только тогда я пытаюсь вызвать их.По сути, рабочий процесс должен был измениться, но время должно быть таким же.
Ниже приведен пример настройки в конструкторе, также не было большого успеха в расширении прототипа и событий.
Надеюсь, что кто-то может указать мне правильное направление, я уверен, что это не так сложно.
https://codepen.io/othbert/pen/VEBEGw
<!-- html -->
<div data-obj="a"></div>
<div data-obj="b"></div>
и JavaScript ...
//js
globalObject = [];
function callEventTriggers(event){
//for each element registered in the globalObject
for (let index in globalObject) {
let target = globalObject[index];
//what event on what target
console.log('triggering: ' + event + ' on target: ', target);
//fire
target.events.trigger(target, event);
}
}
//objects to create
objectWithEvents = function(type){
this.type = type;
//using an empty jquery object to hold events
this.events = $({});
this.events.on('testevent', function(){
//we never fire this
console.log('firing event', this);
//just dump output to the container to demonstrate
$('#content').html(this);
});
}
//extend with prototype method to add object to a global
objectWithEvents.prototype.addToGlobalObject = function(global){
global.push(this);
}
//for each object, create a js object instance
$('[data-obj]').each(function(){
//create the instance
var test = new objectWithEvents($(this).data('obj'));
//attach it to document so we can show calling triggers from different function context.
test.addToGlobalObject(globalObject);
});
//call the triggers from some unrelated code...
callEventTriggers('testevent');