ajaxに動的に作成された要素に関数を追加するjs

基本的に私はajaxを使ってムービー情報アプリを作成していますが、私は解決できないような問題に遭遇しました。いったん私が作成してajaxリクエストをしたら、私はコンテンツを動的に作成し、それをページに追加します。これは動的に作成されたコンテンツです。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

ajaxに動的に作成された要素に関数を追加するjs

答えて

関連する問題