선택기가 존재할 때 jQuery 이벤트 위임?

CaptSaltyJack

생성 된 새로운 특정 DOM 요소의 텍스트를 변경하고 싶다고 가정 해 보겠습니다. 예 :

(실제 API가 아니라는 것을 알고 있습니다)

$('body').on('creation', '.change-this', function() {
  $(this).text('Boom!');
});

따라서 프로그래밍 방식으로 생성 <p class="change-this">하고 DOM에 추가하면 (jQuery 또는 기타를 통해) 위의 내용이 실행됩니다. 이것이 jQuery가 할 수있는 일입니까? 내가 생각할 수있는 것은 프로그래밍 방식으로 HTML을 추가 $.trigger('creation')하고 이벤트를 처리 할 핸들러를 준비하는 것입니다.

마테우스 산토스

새 항목을 추적하고 싶습니까? 맞춤 이벤트를 사용하여이를 수행 할 수 있습니다. jQuery를 사용하고 있으므로이 메서드 .trigger()를 사용하여 이벤트를 만들 수 있습니다.

예를 들어, 요소를 만들 때마다 이벤트를 트리거해야합니다. 따라서 코드에서 다음과 같이 추가합니다.

... // Your code goes here
new_item = '<p class="change-this">'; // The DOM that you will inject
container.append(new_item); // Injecting item into DOM
container.trigger('creation', []); // Firing a event signaling that a new item was created
...

그런 다음이 맞춤 이벤트에 대한 리스너를 만듭니다.

container.on('creation', function() {
    console.log("Yay! New item added to container!");
});

이 스 니펫을 확인하십시오.

$('#add').on('click', function() {

  var item = '<p>New item</p>',
      container = $('#container');
  
  container.append(item);
  container.trigger('creation');
});


$('#container').on('creation', function () {
  var new_message = 'New Item added!<br>';
  
  $('#message').append(new_message);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">add</button>
<b id="message"></b>
<div id="container"></div>

사용자 지정 트랙으로 요소를 추적하려는 경우 다른 사용자 지정 이벤트를 만들고 해당 트리거를 처리하기 만하면됩니다.

그래서 그게 다입니다. jQuery는 사용자 지정 이벤트로 작업하는 간단하고 아름다운 방법을 제공합니다. 대박!

자세한 내용은 다음 링크를 확인 할 수 있습니다 jQuery.trigger를 () - http://api.jquery.com/trigger/

맞춤 이벤트 소개 -http : //learn.jquery.com/events/introduction-to-custom-events/

CustomEvent- https: //developer.mozilla.org/en-US/docs/Web/API/CustomEvent

행운을 빕니다!

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

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

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

JQuery : 이벤트 위임을 사용할 때 모든 선택기에 작업을 적용 할 수 있습니까?

분류에서Dev

다른 위임 된 선택기에 연결된 jQuery 트리거 이벤트?

분류에서Dev

선택한 요소에 jQuery 이벤트 위임 사용

분류에서Dev

OpenLayers 3에서 기능을 선택할 때 이벤트가 있습니까?

분류에서Dev

CKQuery가 존재할 때 CKQueryOperation이 존재하는 이유

분류에서Dev

jquery 이벤트에서 선택기 대신 위치 방법

분류에서Dev

jquery에서 값을 선택할 때 Angularjs 범위가 업데이트되지 않음

분류에서Dev

두 플레이어가 응답을 선택할 때까지 기다리는 Socket.io 이벤트

분류에서Dev

jquery 위임 된 이벤트 처리기 손실

분류에서Dev

ACE 편집기에서 삭제할 때 jquery 트리거 이벤트

분류에서Dev

10 개의 선택 목록 중 하나를 변경할 때 Jquery 이벤트 발생

분류에서Dev

jQuery는 이벤트가 발생할 때 무언가를합니다.

분류에서Dev

jQuery는 이벤트가 발생할 때 무언가를합니다.

분류에서Dev

ListBox 항목을 선택할 때 트리거되는 이벤트

분류에서Dev

클릭 이벤트에서 jQuery Raty 선택 재설정 (jQuery)

분류에서Dev

반응 선택에서 isClearable을 사용할 때 이벤트가 null입니다.

분류에서Dev

.on 이벤트를 사용할 때 jQuery 함수가 연결되지 않음

분류에서Dev

Angular 배열에서 splice ()를 사용할 때 jQuery 선택기가 다음 항목으로 이동합니다.

분류에서Dev

SFINAE : 오버로드가 다른 네임 스페이스로 이동할 때 함수 중단의 존재 확인

분류에서Dev

JQuery 선택기 onchange 이벤트

분류에서Dev

두 테이블을 조인 할 때 존재하지 않는 행 선택

분류에서Dev

JQuery 위젯을 인스턴스화 할 때 현재 요소 선택

분류에서Dev

Jquery 이벤트 위임 문제

분류에서Dev

선택기에서 .attr ()을 연결할 때 jQuery가 하나의 요소 만 선택하는 이유는 무엇입니까?

분류에서Dev

onclick 이벤트 jquery 선택

분류에서Dev

jQuery 선택기로 클릭 이벤트에 액세스 할 수 없음

분류에서Dev

이전 이벤트가 발생할 때까지 JQuery를 어떻게 기다리게합니까?

분류에서Dev

범위에서 임의의 정수를 선택할 때 이상한 동작

분류에서Dev

문서에서 jquery를 사용하여 클릭 이벤트 추적기를 추가 할 때 링크의 클릭 이벤트가 작동하지 않습니다.

Related 관련 기사

  1. 1

    JQuery : 이벤트 위임을 사용할 때 모든 선택기에 작업을 적용 할 수 있습니까?

  2. 2

    다른 위임 된 선택기에 연결된 jQuery 트리거 이벤트?

  3. 3

    선택한 요소에 jQuery 이벤트 위임 사용

  4. 4

    OpenLayers 3에서 기능을 선택할 때 이벤트가 있습니까?

  5. 5

    CKQuery가 존재할 때 CKQueryOperation이 존재하는 이유

  6. 6

    jquery 이벤트에서 선택기 대신 위치 방법

  7. 7

    jquery에서 값을 선택할 때 Angularjs 범위가 업데이트되지 않음

  8. 8

    두 플레이어가 응답을 선택할 때까지 기다리는 Socket.io 이벤트

  9. 9

    jquery 위임 된 이벤트 처리기 손실

  10. 10

    ACE 편집기에서 삭제할 때 jquery 트리거 이벤트

  11. 11

    10 개의 선택 목록 중 하나를 변경할 때 Jquery 이벤트 발생

  12. 12

    jQuery는 이벤트가 발생할 때 무언가를합니다.

  13. 13

    jQuery는 이벤트가 발생할 때 무언가를합니다.

  14. 14

    ListBox 항목을 선택할 때 트리거되는 이벤트

  15. 15

    클릭 이벤트에서 jQuery Raty 선택 재설정 (jQuery)

  16. 16

    반응 선택에서 isClearable을 사용할 때 이벤트가 null입니다.

  17. 17

    .on 이벤트를 사용할 때 jQuery 함수가 연결되지 않음

  18. 18

    Angular 배열에서 splice ()를 사용할 때 jQuery 선택기가 다음 항목으로 이동합니다.

  19. 19

    SFINAE : 오버로드가 다른 네임 스페이스로 이동할 때 함수 중단의 존재 확인

  20. 20

    JQuery 선택기 onchange 이벤트

  21. 21

    두 테이블을 조인 할 때 존재하지 않는 행 선택

  22. 22

    JQuery 위젯을 인스턴스화 할 때 현재 요소 선택

  23. 23

    Jquery 이벤트 위임 문제

  24. 24

    선택기에서 .attr ()을 연결할 때 jQuery가 하나의 요소 만 선택하는 이유는 무엇입니까?

  25. 25

    onclick 이벤트 jquery 선택

  26. 26

    jQuery 선택기로 클릭 이벤트에 액세스 할 수 없음

  27. 27

    이전 이벤트가 발생할 때까지 JQuery를 어떻게 기다리게합니까?

  28. 28

    범위에서 임의의 정수를 선택할 때 이상한 동작

  29. 29

    문서에서 jquery를 사용하여 클릭 이벤트 추적기를 추가 할 때 링크의 클릭 이벤트가 작동하지 않습니다.

뜨겁다태그

보관