기존 이벤트 처리기의 값을 동적으로 수정

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)을 사용하여 더 이상 처리기가 무엇인지에 대한 가시성이 없습니다. 이 변수 이름없는 값으로 함수를 반환

jQuery._data(element).events.click[0].handler 

을하지만 -

나는 (Get value of current event handler using jQuery이 질문에 다음과 같은)이 시도했습니다. 내가 기대 한 것

function() { 
    updateThisElementsMetadata(elementNumber, subElementNumber, rowNumber); 
    updatePreview(elementNumber); 
} 

:

function() { 
    updateThisElementsMetadata(1, 2, 1); 
    updatePreview(1); 
} 

콘솔 로그에 보면 나는 jQuery._data(element).events.click[0] 핸들러에서 => < 기능 범위> => 클로저 값을 가지고 있음을 볼 수 있지만하지 않는 것 거기에 액세스 할 수있는 점 표기법이 있거나 동적으로 순환 할 수있는 배열이 있습니다.

이것이 불가능하다고 말하면 모든 함수 'args를 $ (this)로 변경하고 각 함수에서 필요한 값을 구문 분석하거나 헬퍼 함수를 ​​가질 수 있다고 생각합니다. ...하지만 거기에 무엇이 비슷한 설치를 유지할 수 있다면 그것은 다른 dev의 학습 곡선을 완화 것입니다.

최종 솔루션

나는 (데이터 - 중복 정보를 줄이기 위해 속성 대신) 이름/ID 태그에서 필요한 정보를 파싱 자바 스크립트 함수/객체를 생성, 중복 코드를 줄일 수 있습니다. 이벤트 처리기가 트리거 될 때마다 필요한 값을 먼저 구문 분석 한 다음 w/w 함수를 실행합니다. (당신은 data-이 청소기 만들기 위해 속성을 사용할 수 있습니다, 대신 요소의 name에서 모든 분석의 예 data-element-number="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); 
}); 

또한 :

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

것은 내가 코멘트에 제안 된 어떤 것은이 같은했다 기타.).