Динамически изменяемое значение существующего обработчика событий
Краткая справка: я обновляю существующий код, чтобы отделить обработчики событий от html-объектов, а затем в функции onload я назначаю все необходимые обработчики.
$('input[name^="interactiveElement_"]').each(function() {
var fieldName = "interactiveElement_";
var elementNumber = $(this).attr("name").substring(fieldName.length,$(this).attr("name").indexOf("_",fieldName.length));
var subElementNumber = $(this).attr("name").substring((fieldName+itemNumber+'_').length,$(this).attr("name").lastIndexOf('_'));
var rowNumber = $(this).attr("name").substring($(this).attr("name").lastIndexOf('_')+1);
$(this).on("click.custNamespace", function() {
updateThisElementsMetadata(elementNumber, subElementNumber, rowNumber);
updatePreview(elementNumber);
});
});
Теперь о трудной части. В этом интерфейсе пользователи смогут запускать клоны существующих элементов. Этим клонам необходимо обновить некоторые из своих аргументов обработчика до новых значений.
Прежде чем отделить события, я делал это с этим:
var regex = /([^0-9]+[0-9]+[^0-9a-zA-Z]+[0-9]+[^0-9a-zA-Z]+)([0-9]+)([^0-9]+)?/g;
$(element).attr("onclick",
$(element)
.attr("onclick")
.replace(regex, "$1"+newValue+"$3"));
и так далее для каждого возможного события, которое могли бы иметь эти элементы.
Но теперь, используя jQuery (событие, обработчик), я больше не вижу, что это за обработчик.
Я пробовал это (после этого вопроса - Получить значение текущего обработчика событий, используя jQuery):
jQuery._data(element).events.click[0].handler
Но это возвращает функцию с именами переменных, а не значениями.
function () {
updateThisElementsMetadata(elementNumber, subElementNumber, rowNumber);
updatePreview(elementNumber);
}
Где бы я надеялся на:
function () {
updateThisElementsMetadata(1, 2, 1);
updatePreview(1);
}
Глядя в лог консоли я вижу что jQuery._data(element).events.click[0]
имеет значения в handler =>
Если вы скажете мне, что это невозможно, я мог бы изменить все аргументы функций на $(this) и проанализировать необходимые значения в каждой функции, или, я думаю, у меня может быть вспомогательная функция... но если бы я мог сохранить настройку, аналогичную той, что была там, это облегчило бы обучение других разработчиков
Окончательное решение
Чтобы уменьшить количество дублирующегося кода, я создал функцию / объект javascript, которая анализирует необходимую информацию из тега name/id (вместо атрибутов data для уменьшения избыточной информации). Каждый раз, когда запускается обработчик события, он сначала анализирует необходимые значения, а затем запускает функцию с ними.
$('input[name^="interactiveElement_"]').on("click.custNamespace", function() {
var inputField = inputFieldClass(this);
updateThisElementsMetadata(inputField.elementNumber, inputField.subElementNumber, inputField.rowNumber);
updatePreview(inputField.elementNumber);
});
var inputFieldClass = function(field) {
var fieldIdentity = $(field).attr("name") === undefined ? $(field).attr("id") : $(field).attr("name");
var fieldName = fieldIdentity.substring(0,fieldIdentity.indexOf("_")),
elementNumber = fieldIdentity.substring(fieldName.length + 1,fieldIdentity.indexOf("_",fieldName.length + 1)),
subElementNumber = fieldIdentity.substring((fieldName+'_'+elementNumber+'_').length,fieldIdentity.lastIndexOf('_')),
rowNumber = fieldIdentity.substring(fieldIdentity.lastIndexOf('_')+1);
return {
fieldName : fieldName,
elementNumber : elementNumber,
subElementNumber : subElementNumber,
rowNumber : rowNumber,
getInputName : function () {
return this.name + "_" + this.elementNumber + "_" + this.subElementNumber + "_" + this.rowNumber;
}
};
};
1 ответ
То, что я предлагал в комментариях, было примерно таким:
$('input[name^="interactiveElement_"]').on("click.custNamespace", function() {
var fieldName = "interactiveElement_";
var elementNumber = $(this).attr("name").substring(fieldName.length,$(this).attr("name").indexOf("_",fieldName.length));
var subElementNumber = $(this).attr("name").substring((fieldName+itemNumber+'_').length,$(this).attr("name").lastIndexOf('_'));
var rowNumber = $(this).attr("name").substring($(this).attr("name").lastIndexOf('_')+1);
updateThisElementsMetadata(elementNumber, subElementNumber, rowNumber);
updatePreview(elementNumber);
});
Кроме того, вместо анализа всего элемента name
Вы могли бы использовать data-
атрибуты, чтобы сделать его чище (например, data-element-number="1"
, так далее.).