最终解决方案

Question

快速背景：我正在更新现有代码以将事件处理程序与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（事件，处理程序），我不再能够看到处理程序是什么。

我试过这个问题（关注这个问题 - Get value of current event handler using 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 =＆gt; ＆LT;功能范围＆gt; =＆GT;关闭但似乎没有点符号来访问它，甚至是一个我可以动态循环的数组。

如果你告诉我这是不可能的，我可以将所有函数的args更改为$（this）并在每个函数中从中解析出必要的值，或者我想我可以有一个辅助函数。 ..但如果我可以保持类似的设置，那么它将减轻其他开发人员的学习曲线。

最终解决方案

为了减少重复代码，我创建了一个javascript函数/对象，它从name / id标记中解析出必要的信息（而不是数据属性以减少冗余信息）。每当触发事件处理程序时，它将首先解析出必要的值，然后运行带有它们的函数。

$('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;
        }
    };
};

Answer 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"中的所有内容。

动态修改现有事件处理程序的值

最终解决方案

1 个答案: