페이지로드 후 동적으로 생성 된 DOM 객체에서 이벤트 발생 방법

동적으로 생성 된 버튼으로 페이지 일부를로드 할 때 관련 JavaScript/jQuery 이벤트를 활성화하는 데 문제가있었습니다. 이 문제를 어떻게 해결할 수 있습니까? 이 문제를 해결하는 가장 좋은 방법은 무엇입니까?페이지로드 후 동적으로 생성 된 DOM 객체에서 이벤트 발생 방법

실제 문제는 근본 문제입니다.

나는 Ajax가있는 페이지에서 새로운 동적 페이지 섹션을 생성하기 위해 php 함수를 호출하는이 함수를 가지고있다.

function loadData(page){ 
     $.ajax({ 
      type: "POST", 
      url: ".../get_Scorewithagination.php", 
      data: 'page='+page+'&testID='+testID+'&testDate='+testDate+'&empPass='+empPass+'&courseCode='+courseCode, 
      success: function(msg){ 
       $('#testInfo').empty(); 
       $(document).ajaxComplete(function(event, request, settings){ 
        loading_hide(); 
        $("#resultBox").html(msg); to #resultBox 
       }); 

       $('.iconpoint_orange').click(function() { 
        btnNames = $(this).attr("name").split("_"); 
        $.post('.../getInfo.php', {testresult: btnNames[1]}, ShowTestInfo); 
       }); 

       // Collapse row on delete 
       $('.iconpoint_blue').click(function() { 
        alert(); 
        rowName = this.name; 
        rowID = '#' + rowName; 
        $(this).closest('tr').children('td').addClass("row_hover"); 

        $("#dialog_confirm").html("Are you sure you want to delete this?"); 
        $("#dialog_confirm").dialog({ 
          buttons : { 
         "Delete" : function() { 
         $(rowID).closest('tr').animate({opacity: 0},500).slideUp(300); 
         setTimeout(function() {$(rowID).closest('tr').empty().remove();} ,3000); 
         $(this).dialog("close"); 

         }, 
         "Cancel" : function() { 
         $(rowID).closest('tr').children('td').removeClass("row_hover"); 
         $(this).dialog("close"); 
         } 
          } 
        }); 
       $("#dialog_confirm").dialog("open"); // Show dialog box 

       }); 

      }, 
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
         alert("Error: " + errorThrown); 
         $('#testInfo').html("<br\>Status: " + textStatus +"<br\>Error: " + errorThrown); 
          $('#testInfo').addClass("errorRed"); 


      }  

     });//$.ajax() END 
    }//loadData(page) END

그러나 문제는 그 두 개의 버튼이

.iconpoint_blue

및

.iconpoint_orange

은 행이 동적으로 PHP 파일에 의해 생성되지 않은 응답을 요구 할 수있을 후에 나는라는 점이다 아약스와

나중에 Ajax가 html 코드를 반환했다는 사실은 나중에 완료되었으므로 문서 시작 부분에 자바 스크립트가 검사하지 않는다는 것을 알고 있습니다. 따라서 동적으로 만든 버튼은 올바른 선택기 인 #에서도 기능에 응답하지 않습니다.

각 레코드에 대해 기존 함수의 선택기를 사용하여 동적으로 생성 된 버튼을 원한다면 페이지로드시로드 된 함수를 다시 호출 할 수 있습니까?

출처

2013-07-02 weia design

몇 가지 예제 코드를 게시 할 수 있습니까? – Zacho

하지만 더 많은 담당자가 필요한 것에 댓글을 달고 투표를 위해 투표를 중지 할 수 있습니까? 이는 권력 남용이며 새로운 스태커에게 친숙하지 않습니다. –

나중에 참조 할 수 있도록 jsFiddle에 아주 오랜 예제의 javascript를 게시하여 추가 노력 없이도 실행하고 디버깅 할 수 있도록하는 것이 좋습니다. – astex

상위 요소에 함수를 바인딩하십시오. 예를 들어,이 HTML로 :

$('.wrapper').on('click', '.click_here', function() { 
    $(this).after('<a href="#" class="or_here">or here</a>'); 
}); 
$('.wrapper').on('click', '.or_here', function() { 
    $(this).remove(); 
});

Here의 jsFiddle :

<div class='wrapper'> 
    <a href='#' class='click_here'>click here</a> 
</div>

는 다음과 같은 자바 스크립트를 가질 수있다.

출처

2013-07-02 15:35:18 astex

페이지로드 후 동적으로 생성 된 DOM 객체에서 이벤트 발생 방법

답변

관련 문제