動態修改現有事件處理程序的值

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