바닐라 js에서 동적으로 생성 된 요소에 함수 추가하기

기본적으로 저는 아약스를 사용하여 영화 정보 응용 프로그램을 만드는 과정에 있으며, 해결할 수없는 문제가 발생했습니다. 일단 내가 만들고 Ajax 요청을하면 동적으로 내용을 만들고 페이지에 추가합니다. 이것은 내 동적으로 생성 된 콘텐츠입니다.바닐라 js에서 동적으로 생성 된 요소에 함수 추가하기

output += 
    `<div class="box"> 
    <div class="box-image"> 
    <img src="${val.Poster}" alt="${val.Title}"> 
    </div> 
    <div class="box-body"> 
     <h4 class="box-title">${val.Title}</h4> 
     <p class="year">${val.Year}</p> 
     <a href="#" class="modal-trigger" id="modalTrigger">Modal Trigger</a> 
    </div> 
    </div>`.

그것은 나에게 문제를주고있다 앵커 태그입니다, 나는 내가 모달을 열 수 있도록, 여기에 기능을 추가 할. 또한 함수 내부에서 기본 동작을 방지하는 방법을 원합니다.

출처

2017-11-29 Anonymous

당신은 몸 문서에 클릭에 대한 이벤트 리스너를 추가하고 아래 표와 같이 만들고있는 요소에 대해 선택할 수 있습니다 : '(

$("body").on('click', "a.modal-trigger", function(e) { 
    e.preventDefault();

$("#ajax").click(function() { 
 
    $("#output").append(
 
    $("<a/>") 
 
    .attr("id", "modalTrigger") 
 
    .attr("class", "modal-trigger") 
 
    .attr("href", "#") 
 
    .text("modal") 
 
); 
 
}); 
 

 
$("body").on('click', "a.modal-trigger", function(e) { 
 
    e.preventDefault(); 
 
    console.log('modal!'); 
 
    $("#output").append("modal!"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <button id="ajax"> 
 
Make Ajax Request 
 
</button> 
 

 
    <div id="output"> 
 

 
    </div> 
 
</body>

CONSOLE.LOG 모달! '); }});

출처

2017-11-29 20:22:14 vapurrmaid

정말 고마워!!! –

도와 드리겠습니다! 이 답변으로 귀하의 문제가 해결되었거나 앞으로 다른 문제가 있으면 동의 한 것으로 표시하십시오. – vapurrmaid

바닐라 js에서 동적으로 생성 된 요소에 함수 추가하기

답변

관련 문제