jQuery를 사용하여 동적으로 생성 된 요소에 대한 사용자 지정 함수 호출

사용자 4493177

다음과 같이 특정 클래스의 모든 요소에 대해 호출해야하는 외부 함수가 있습니다.

jQuery('.myClass').myFunction();

이것은 작동하지만 동적으로 생성 된 요소에 대해 어떻게이 작업을 수행 할 수 있습니까? 요소를 만들 수있는 여러 함수가 있으며 새 요소를 만드는 모든 코드에이 줄을 추가하고 싶지 않습니다.

그 이유는 내가 PHP와 함께 사용하는 요소에 따라 자바 스크립트를로드하기 때문입니다. 따라서 두 함수가 동일한 페이지에 함께로드되거나로드되지 않을 수있는 다른 파일에 있기 때문에 요소 생성 함수에 myFunction ()을 추가 할 수 없습니다.

그래서 .myFunction()생성 되 자마자 '.myClass'로 객체에 대한 함수를 어떻게 호출 할 수 있습니까?

따라서 요소를 생성하는 함수에서 요소에 대해 어떤 함수를 호출해야하는지 모르겠고 요소에 대해 함수를 실행하는 파일에서 어떤 함수가 요소를 생성하는지 모르겠습니다.

해결 방법 : 중복 질문으로 표시되어 있으므로 답변을 추가 할 수 없습니다. 그러나 나는 그 질문과는 다른 접근 방식을 취했습니다. 내 접근 방식은 모든 스크립트가 요소를 만들 때 호출해야하는 함수를 추가 할 수있는 새 클래스를 만들고 새 요소를 만들 때 해당 함수를 호출하는 것입니다.

Js :

function jsHandler(){
    this.actions = [];

    this.addAction = function(action){
        this.actions.push(action);
        action();
    };

    this.callActions = function(){
        jQuery.each(this.actions,function(key,action){
            action();
        });
    };
}
var myJsHandler = new jsHandler;//global variable

그런 다음 객체에 대해 함수를 호출해야하는 각 파일에 다음을 넣습니다.

myJsHandler.addAction(function(){
    jQuery('.myClass').myFuncion();
});

요소를 만드는 모든 파일에서 요소를 만든 후 다음을 넣습니다.

myJsHandler.callActions();

나를 위해 이것은 작동합니다. 그래도 몇 가지 참고 사항 :

  • 다른 스크립트가로드되기 전에 jsHandler가 항상 생성되도록 일부 코드를 추가해야합니다.
  • 이 함수는 요소가 생성 될 때마다 모든 함수를 호출합니다. 내 기능의 경우 이것은 중요하지 않습니다.
Haydar C.
<div class="root">
  <span class="line"></span>
</div>


jQuery(document).on('DOMNodeInserted','.line',function(){
     jQuery(this).myFunction();
     console.log("object added");})
jQuery(".root").append(jQuery("<span/>").addClass("line"))

자세한 내용과 Mutation 이벤트는 링크를 나열 합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

react-navigation-stack을 사용하여 다른 구성 요소에 대한 사용자 정의 헤더로 클래스 구성 요소를 사용할 때 "클래스를 함수로 호출 할 수 없습니다"오류가 발생합니다.

분류에서Dev

사용자 지정 함수를 여러 파일에 적용하고 R에서 고유 한 csv 출력 생성

분류에서Dev

동적으로 생성 된 JS 함수에 사용자 지정 속성 할당

분류에서Dev

동적으로 생성 된 이미지에 대한 jquery 함수

분류에서Dev

CSS를 사용하여 동적으로 생성 된 요소 정렬

분류에서Dev

동일한 클래스 이름을 사용하여 동적으로 생성 된 div에 요소 추가-Jquery

분류에서Dev

OpenXML SDK를 사용하여 생성 된 DOCX의 목차에 대한 페이지 번호 자동 업데이트

분류에서Dev

동적으로 생성 된 요소를 사용한 AngularJS 게시

분류에서Dev

Jquery를 사용하여 동적으로 추가 된 행에 대한 자동 완성

분류에서Dev

사용 된 모든 vue 구성 요소에 대한 후크 함수 호출

분류에서Dev

사용자 정의 확인란을 사용하여 변경된 이벤트에 대한 함수 호출

분류에서Dev

앵커 태그에 자바 스크립트를 사용하여 동적으로 함수 호출 정의

분류에서Dev

동적으로 생성 된 요소에 querySelector ()를 사용할 수 있습니까?

분류에서Dev

지정된 사용자에 대한 사용자 목록을 자동으로 확인하는 파일 생성

분류에서Dev

지정된 사용자에 대한 사용자 목록을 자동으로 확인하는 파일 생성

분류에서Dev

ACF로 업데이트 / 생성 된 사용자 지정 게시물 유형 후 Wordpress에서 함수 호출

분류에서Dev

동적으로 생성 된 여러 HTML 요소에 jQuery 적용

분류에서Dev

dplyr 및 NSE를 사용하여 다양한 인수로 함수 호출을 동적으로 구성

분류에서Dev

VueJS의 구성 요소에 바인딩 된 함수 호출에 사용자 지정 매개 변수 추가

분류에서Dev

동적으로 생성 된 여러 버튼, 클릭시 동일한 기능을 사용하지만 동적 소스 매개 변수 사용

분류에서Dev

Python27은 사용자 입력에 정의 된대로 적절한 get | post | delete를 호출하는 함수에 메서드를 전달합니다.

분류에서Dev

jQuery를 사용하여 파일에서 동적으로로드 된 요소에 대한 CSS + 앵커 링크가 작동하지 않음

분류에서Dev

특정 함수 호출에 특정한 파일 처리를 사용하여 C ++에서 다중 파일 생성

분류에서Dev

jQuery를 사용하여 동적으로 생성 된 순서없는 목록을 수정하는 방법

분류에서Dev

동적으로 생성 된 양식 값을 사용하여 PHP에서 POST 요청으로 변수 설정

분류에서Dev

JS 또는 Jquery를 사용하여 동적으로 생성 된 요소에 이벤트 추가

분류에서Dev

Chrome 확장 프로그램에서 동적으로 생성 된 요소에 대한 jQuery 메서드 호출

분류에서Dev

onclick () 함수를 호출하는 함수, 동적으로 생성 된 버튼에 버튼 값 속성 값 전달

분류에서Dev

동적으로 생성 된 함수를 사용하여 동적으로 속성 추가

Related 관련 기사

  1. 1

    react-navigation-stack을 사용하여 다른 구성 요소에 대한 사용자 정의 헤더로 클래스 구성 요소를 사용할 때 "클래스를 함수로 호출 할 수 없습니다"오류가 발생합니다.

  2. 2

    사용자 지정 함수를 여러 파일에 적용하고 R에서 고유 한 csv 출력 생성

  3. 3

    동적으로 생성 된 JS 함수에 사용자 지정 속성 할당

  4. 4

    동적으로 생성 된 이미지에 대한 jquery 함수

  5. 5

    CSS를 사용하여 동적으로 생성 된 요소 정렬

  6. 6

    동일한 클래스 이름을 사용하여 동적으로 생성 된 div에 요소 추가-Jquery

  7. 7

    OpenXML SDK를 사용하여 생성 된 DOCX의 목차에 대한 페이지 번호 자동 업데이트

  8. 8

    동적으로 생성 된 요소를 사용한 AngularJS 게시

  9. 9

    Jquery를 사용하여 동적으로 추가 된 행에 대한 자동 완성

  10. 10

    사용 된 모든 vue 구성 요소에 대한 후크 함수 호출

  11. 11

    사용자 정의 확인란을 사용하여 변경된 이벤트에 대한 함수 호출

  12. 12

    앵커 태그에 자바 스크립트를 사용하여 동적으로 함수 호출 정의

  13. 13

    동적으로 생성 된 요소에 querySelector ()를 사용할 수 있습니까?

  14. 14

    지정된 사용자에 대한 사용자 목록을 자동으로 확인하는 파일 생성

  15. 15

    지정된 사용자에 대한 사용자 목록을 자동으로 확인하는 파일 생성

  16. 16

    ACF로 업데이트 / 생성 된 사용자 지정 게시물 유형 후 Wordpress에서 함수 호출

  17. 17

    동적으로 생성 된 여러 HTML 요소에 jQuery 적용

  18. 18

    dplyr 및 NSE를 사용하여 다양한 인수로 함수 호출을 동적으로 구성

  19. 19

    VueJS의 구성 요소에 바인딩 된 함수 호출에 사용자 지정 매개 변수 추가

  20. 20

    동적으로 생성 된 여러 버튼, 클릭시 동일한 기능을 사용하지만 동적 소스 매개 변수 사용

  21. 21

    Python27은 사용자 입력에 정의 된대로 적절한 get | post | delete를 호출하는 함수에 메서드를 전달합니다.

  22. 22

    jQuery를 사용하여 파일에서 동적으로로드 된 요소에 대한 CSS + 앵커 링크가 작동하지 않음

  23. 23

    특정 함수 호출에 특정한 파일 처리를 사용하여 C ++에서 다중 파일 생성

  24. 24

    jQuery를 사용하여 동적으로 생성 된 순서없는 목록을 수정하는 방법

  25. 25

    동적으로 생성 된 양식 값을 사용하여 PHP에서 POST 요청으로 변수 설정

  26. 26

    JS 또는 Jquery를 사용하여 동적으로 생성 된 요소에 이벤트 추가

  27. 27

    Chrome 확장 프로그램에서 동적으로 생성 된 요소에 대한 jQuery 메서드 호출

  28. 28

    onclick () 함수를 호출하는 함수, 동적으로 생성 된 버튼에 버튼 값 속성 값 전달

  29. 29

    동적으로 생성 된 함수를 사용하여 동적으로 속성 추가

뜨겁다태그

보관