MDL - $ .get()으로 뷰를로드 할 때 텍스트 필드가 작동하지 않습니다.

Question

저는 Material Design Lite를 사용 중이며 get() jquery 메소드를 통해 팝업을 만들고 있습니다. 팝업 요소가 생기면 MDL 텍스트 필드 클릭이 작동하지 않습니다. 하지만 페이지로드가 잘 작동하면 팝업을로드합니다.

나는 CSS 파일과 js를로드 중입니다. 문제는 js로드 후 요소를로드하는 것 같아요 어떻게 해결할 수 있습니까? 나는 과거에 그렇게했고 이런 문제가 없었습니다.

팝업을로드 한 후 콘솔에 오류가 없습니다.

function create(){ 
$("#create").click(function(e) 
{ 
    e.preventDefault(); 
    var linkPopup = $(this).attr('data-popup'); 
    $.get(linkPopup, function(response) 
    { 
     $(".opacity").css("display","block"); 
     $(".popup").css("display","block"); 
     $('.popup').html(response); 
     $(".popup-close i").click(function() 
     { 
     $(".popup .mdl-card").remove(); 
     $(".popup").css("display","none"); 
     $(".opacity").css("display","none"); 
     }); 
    }); 
}); 
} 

해결책 : 난 후로드 elments을 인식하지 못하기 때문에 DOM을 업그레이드 할이 줄을 추가해야합니다.

componentHandler.upgradeDom(); 

감사의 동적 HTML을 DOM에 추가 된 후

Answer 1

이벤트 핸들러를 연결합니다. 이벤트를 wchcih하는 .on 그래서 단지 부모 요소를 사용하여 부모와 위임에

$.get("ajax/test.html", function(data) { 
    $(".result").html(data); 
    //attach click event handlers here 
    create(); 
}); 

또는 첨부 이벤트 핸들러는 #create 나중에 추가 할 수있는 이벤트를 부착시 존재 및 이벤트에 의해 그것을 작동합니다 클릭해야 부착 대표단.

$("body").on("click", "#create", function() { 
    //click event triggered 
});