動的に生成されたdivでjQueryが機能しない

Question

私は、FlickrのREST APIを利用するウェブサイトのポートフォリオセクションを作成しています。ポートフォリオ品目のリストは、しかし、このコードによって動的に生成されます。

$.ajax({ 
    url: "https://api.flickr.com/services/rest?method=flickr.photoSets.getList&user_id=********@N04&format=json&nojsoncallback=1&api_key=***********", 
    context: document.body 
}).done(function(results) { 
    results.photosets.photoset.map(function(item) { 
    var imgUrl = "https://farm" + item.farm + ".staticflickr.com/" + item.server + "/" + item.primary + "_" + item.secret + "" + ".jpg"; 
    $(" #portfolio_horizontal_container ").append(
     '<div class="portfolio_item interior design"> \ 
      <img src=' + imgUrl + ' alt="" /> \ 
      <div class="port-desc-holder"> \ 
       <div class="port-desc"> \ 
        <div class="grid-item"> \ 
         <h3><a href="folio-single">Quisque non augue</a></h3> \ 
         <span>Photography/ Web design</span> \ 
        </div> \ 
       </div> \ 
      </div> \ 
     </div>' 
    ) 
    }) 
}); 

私はまた、ポートフォリオの相互作用とスタイルを管理し、別のプラグインを持っています。しかし、ポートフォリオ項目のDOM要素がロードされると、この他のプラグインは機能しません。そのため、ポートフォリオに適用される機能は存在しません。私はこの試みを成功させようと試みてきた。どんなこと？

Answer 1

DOMエレメントにイベントハンドラーを付けるコードは、新しいエレメントがページに追加されるたびに再実行する必要があります。

上記と同じ機能で、プラグインを再起動して新しい構造を認識する必要があります。

Answer 2

私はあなたの問題を理解している場合は、イベントを作成する関数を作成し、AJAX行われ、それを呼び出すことができます。

function bindEvent(id){ 
     //initialize the plugin for the given id 
    } 

、あなたはbindEventを呼び出すことができ、使用してajax.done内部APPEND後新しく挿入されたhtmlのid。

または

それはあなたが

$('body').on('click', 'my-dinamic-id', function(){...})