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

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的on（event，handler）我不再能够看到处理程序是什么。

我已经试过这（以下这个问题 - 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]在处理程序中的值=> <功能范围> =>关闭，但它似乎没有就像有点符号来访问它，甚至是我可以动态循环的数组。

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

最终解决

为了减少重复的代码，我创建了一个JavaScript函数/对象，解析出从名称/ ID标签必要的信息（而不是数据 - 属性，以减少冗余信息）。每当事件处理程序被触发时，它将首先解析出必要的值，然后运行函数w/them。

$('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"，等等。）。