jQuery没有处理动态生成的div

时间:2016-04-12 15:53:17

标签: javascript jquery html

我正在创建一个利用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元素被加载时,其他插件就不起作用,因此它应用于组合的功能不存在。我试过并试图解决这个问题但没有成功。有没有?

2 个答案:

答案 0 :(得分:2)

每当将新元素添加到页面时,都需要重新运行将事件处理程序附加到DOM元素的代码。

在与上面相同的功能中,您需要重新调用插件,以便它能够了解新结构。

答案 1 :(得分:0)

如果我理解你的问题,你可以创建一个创建事件的函数,并在完成的ajax中调用它:

FacesContext

然后你可以使用新插入的html的id在ajax.done中追加后调用bindEvent。

如果您要绑定的事件可以使用

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