동적으로 생성 된 테이블에서 Jquery가 작동하지 않습니다.

Question

페이지로드시 json 호출을 사용하여 jquery 템플릿 플러그인을 사용하여 테이블에 동적으로 데이터를로드하는 간단한 웹 페이지가 있습니다. 이 테이블에서 buttons/div 또는 클릭 할 수있는 항목을 넣으면 해당 열의 내용을 편집하는 새 페이지가 열리는 함수를 넣을 수 있습니다.

문제는 jquery 물건이 내가 테이블에 넣은 버튼에서 작동하지 않는다는 것입니다. 테이블에서 같은 버튼을 누르면 (즉, 동적으로 생성하지 않음) 잘 작동하지만 그 다음에 열 하나당 하나의 버튼이 표시되지 않습니다. 여기

내가 페이지로드

$(document).ready(function() { 
    $.ajax({ 
     type: 'POST', 
     dataType: "json", 
     url: "http://server:8000/categories/list", 
     success: function (data) { 
       LoadCategories(data['CategoryList']); 
     } 
    }); 

    $(".editButton").button(); // using jquery-ui 
    $(".editButton").click(function() { 
     alert("Button has been clicked"); 
    }); 
}); 

에있는 내 템플릿 모습입니다

<script id="catTemplate" type="text/x-jquery-tmpl"> 
     <tr id="$CategoryId"> 
      <td> <button id="edit-${CategoryId}" class="editButton"> Edit</button> </td> 
      <td> ${CategoryName}</td> 
      <td> ${OtherValue} </td> 
     </tr> 
    </script> 

제대로 테이블 하중과 모든 것을 그 JQuery와 물건이 적용되지 않습니다 그냥 그렇게 동적으로 생성 된 항목. 왜 그런가, 그리고 내가 원하는 것을하기 위해 버튼을 어떻게 얻을 수 있을까?

Answer 1

귀하의 jQuery를 첨부합니다. Ajax 호출은 비동기 적이므로 Ajax 호출은 Ajax 호출의 시작일 뿐이라는 것을 기억하십시오. 성공 기능이 완료 될 때까지 완료되지 않습니다.

페이지에 콘텐츠를 실제로 추가 한 후에 성공 처리기에 아약스로드 된 콘텐츠를 수정하는 것이 좋습니다. 당신이 그들을 위해 클릭 처리기를 추가 한 경우 (그래서 경우에도 작동 확인하고 문서 수준에서 모든 클릭을 잡을 것 라이브 핸들러로

$(".editButton").live('click', function() { 
    alert("Button has been clicked"); 
}); 

과 :

당신은 또한 사용할 수 있습니다 요소가 페이지에 추가되기 전에이를 지정합니다.)하지만 성공 핸들러의 페이지에 추가 된 후 오브젝트에서 직접 조작하는 것보다 다소 효율적입니다.

Answer 2

사용 live() 콘텐츠가 페이지에서 실제로 전에 클릭 처리기 가능성이 실행되는 추가 이벤트를 동적으로

$('.editButton').live('click', function() { 
    alert("Button has been clicked"); 
}); 

Answer 3

귀하는 호출 : 아약스이 성공

$(".editButton").button(); // using jquery-ui 
$(".editButton").click(function() { 
    alert("Button has been clicked"); 
}); 

모두 전에. 따라서 버튼으로 만들고 클릭 이벤트를 바인딩하려고하면 해당 클래스의 요소가 아직 존재하지 않습니다. 대신를 사용

$(document).ready(function() { 
    $.ajax({ 
     type: 'POST', 
     dataType: "json", 
     url: "http://server:8000/categories/list", 
     success: function (data) { 
       LoadCategories(data['CategoryList']); 
       $(".editButton").button(); // using jquery-ui 
       $(".editButton").click(function() { 
        alert("Button has been clicked"); 
       }); 
     } 
    }); 
}); 

Answer 4

가, 문제가 무엇인지 설명하기위한 잠재적 인 솔루션을 모두 성공 콜백

$(".editButton").button(); // using jquery-ui 
$(".editButton").click(function() { 
    alert("Button has been clicked"); 
});