나는이 <div>에 id="modal"JQuery와 함께 동적으로 생성 load()방법 :
$(".show-product").click(function(){
$("#modal").load($(this).attr("href"), function(e){
$(".details").click(function(){
클래스 '클릭 이벤트에 코드를 넣어야했습니다. 이 코드 내에서 세부 사항 '이 실행되지 않았기 때문입니다. 모달 외부에서도 사용하기 때문에 두 위치에 코드가 있습니다.
여기에서 본 Stack Overflow의 예 덕분에 동적으로 빌드 한 테이블에서도 비슷한 일이 발생합니다. 클릭 이벤트를 캡처하지 않고 모달을 열 때처럼 창이 어두워 지지만 URL이나로드를 호출하지 않습니다. 이 코드 :
$.ajax({
url : form,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR){
$("#dynamicTable>tbody>tr").remove();
var x = [];
$.each(dataSet, function(i, item) {
x.push('<tr><td><a href="/product/' + item.product.id + '" class="details" data-toggle="modal" data-target="#modal">' + item.product.name + '</a></td>');
x.push('<td>' + item.product.name + '</td></tr>');
});
$("#dynamicTable>tbody").html(x.join(""));
},
error: function(jqXHR, textStatus, errorThrown){
alert('Not product found!');
}
});
event.preventDefault()
두 경우 모두 이벤트가 동적으로로드되기 때문에 작동하지 않는다고 생각합니다. 나는 여기와 Google에서 찾고 변경을 시도했지만 코드를 복제하지 않고도 작동하지 않습니다 (이벤트 $(document).ready및 데이터 동적, 모달 창 및로드 테이블을로드하는 각 이벤트에서).
변경 사항 :
$(document).ready(function() {
//$(".show-product").click(function(){
$(".show-product").on("click", function(e){
$("#modal").load($(this).attr("href"), function(e){
//$('.details').click(function(e){
// ........
});
});
// Added
$(".details").on("click", function(e){
..........
..........
});
});
이러한 변경 사항은 여전히 작동하지 않고 정적 컨텐츠가있는 페이지에서만 작동하며 동적 컨텐츠 (모달, 테이블 동적 및 기타)가 작동하지 않는 이벤트를 갖게됩니다.
내가 뭘 잘못 했어?
이벤트를 위임하면 body동적으로 생성 된 요소에 핸들러를 직접 연결하지 않으므로 문제 가 해결됩니다.
$(document.body).on("click", ".details", function(e){
...
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다