jQuery 선택이 작동하지 않습니다.

Question

내 HTML 문서에서 문서가 완전히로드되면 jQuery에 의해 자동으로 채워지는 빈 표 본문이있는 표가 있습니다. 테이블 본문은 PHP 스크립트에 의해 생성되며 jQuery는 간단한 GET 요청으로 컨텐츠를 가져옵니다. 여기

내 PHP 코드는 ...

<?php 

// ... 
// ... 
// Just take a look at the following two lines, 
// the other code is not important in this case. 
while ($tableDataRow = $tableData->fetch_assoc()) 
    echo '<tr><td>'. $tableDataRow['id']. '</td><td>'. $tableDataRow['name']. '</td><td><a href="#" class="delete-row" data-id="'. $tableDataRow['id']. '">Delete</a></td></tr>'; 

?> 

가 출력이 될 수 ...

<tr><td>1</td><td>Nadine</td><td><a href="#" class="delete-row" data-id="1">Delete</a></td></tr><tr><td>2</td><td>Nicole</td><td><a href="#" class="delete-row" data-id="2">Delete</a></td></tr> 

모든 것이 완벽하게 작동, 유일한 문제는 jQuery를 어떤 클릭 이벤트 경우 반응하지 않는다는 것입니다 발생합니다. 내 jQuery 코드는 ... 다음과 같습니다

$(document).ready(function() { 
    $(".delete-row").click(function(event) { // "a[class=delete-row]" does not work, too. But "*" works for every element, even for the links?! 
     event.preventDefault(); 
     alert("You clicked on that link!") 
    }); 
}); 

Answer 1

.click()은 기본적으로 DOM의 스냅 샷을 취하는 jQuery의 bind() 메소드를 사용합니다. 이 경우 해당 스냅 샷은 문서 준비 상태로 생성됩니다.

PHP 코드가 페이지에 동적으로 추가되기 때문에 문서 준비 DOM 스냅 샷에 포함되지 않습니다.

$("table").on('click', '.delete-row', function() { ... }); 

이이 이벤트 위임로 알려져있다 : 이러한 이유로, jQuery를 대신 사용할 수있는 on() 방법이있다.

Answer 2

사용 위임 :

$(document).ready(function() { 
    $("#mytable").on("click",".delete-row",function(event) { // "a[class=delete-row]" does not work, too. But "*" works for every element, even for the links?! 
     event.preventDefault(); 
     alert("You clicked on that link!") 
    }); 
}); 

Answer 3

이벤트 페이지의 생성에 바인드하지만 그래서 당신 "의"같은 것을 사용해야 후 테이블이 부착되어 또는 "클릭"대신 jQuery의 최신 이벤트 바인드 메소드가 무엇이든간에

Answer 4

페이지로드가 끝나면 DOM에 요소가 추가되기 때문에 문제가 발생합니다 (IE를 통해 아약스 요청). $(".delete-row").click(function(event) {});은 등록자가 누락되면 요소가 누락되어 실패합니다. 빨간 방법 라운드 이것 on을 사용하는 것입니다.

$('.parentElement').on('click','.delete-row',function() { 
    event.preventDefault(); 
    alert("You clicked on that link!"); 
}); 

.parentElement은 아약스의 부모가 HTML을 추가하지만 동적으로 자신을 추가 인 요소가 될 것입니다.