Ajax 附加的内容选择器没有响应

Question

我有一个非常特殊的问题，我通过 ajax 加载一些内容，然后将更多内容附加到新添加的内容中

我会试着解释一下这个场景。

第一次 Ajax 调用

 $.ajax({
         url: href , 
         dataType: 'html',
         success: function(data) {
            var response = $(data).find('#content').html();
            $('#content').append(response)
           }
});

为简单起见，我们假设附加到 div 内容的内容是

 <div id="wrap"></wrap>

第二次 Ajax 调用（一些 api）

$.ajax({
     url: "https://api.tumblr.com/v2/blog/sometumblr.tumblr.com/posts?api_key=someapikey",
     dataType: 'jsonp',
     success: function(posts) {
      var postings = posts.response.posts,
          output = '';
          for (var i in postings) {
            var p = postings[i];
                output += '<div class="p"><div class="photo"><img src=' + p.photos[0].original_size.url + '/></div></div>';

        }
       $.when($('#wrap').append(output)).then( masonry());

                        }   
                    });

Masonry 是一个函数，将在附加输出变量后调用。

这里的问题是，因为 div 包装被附加到 DOM 我无法选择它，然后将新内容附加到变量内容中。我知道事件委托和 jquery 的 .on() 函数，但它们都需要传递一个事件。不幸的是 .prepend 或 .html() 不需要事件处理程序，所以它不起作用。

我见过使用 jquery 的触发器和自定义事件的其他漂亮解决方案，但是在 masonry() 函数中，我还需要传递选择器 $('#wrap') 以便解决方案不够用。是否可以将新附加的内容附加到 DOM，以便它们可以以正常方式使用。

即附加

   <div id="wrap"></wrap>

并且可以使用

 $('#wrap).html('some stuff')

任何指针将不胜感激。

Answer 1

听起来您有 2 个 ajax 调用将编辑 DOM 的同一部分。所以你需要协调他们的变化。

第一个 ajax 调用完成后可以广播。调用data 以防它先完成，调用trigger 以防它第二完成。

 $.ajax({
  ...
  success: function(data) {
    var response = $(data).find('#content').html();
    $('#content').append(response)
                 .data('done-appending', true); // mark as ready
    $(document).trigger('content-appended');    // trigger custom event
  }
});

第二次 ajax 调用通过查找您设置的 data 来检查海岸是否畅通，如果没有，它将等待自定义事件。

$.ajax({
  ...
  success: function(posts) {
    var postings = posts.response.posts,
        output = '';
    ...
    // call this function when everything is ready and #wrap is in the DOM:
    var appendOutput = function () {
      $('#wrap').append(output);
      masonry();
    };
    if($('#content').data('done-appending')) {
      // ready to proceed
      appendOutput();
    }
    else {
      // need to wait for the custom event to fire
      $(document).one('content-appended', appendOutput);
    }
  }
});