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（）函数中我需要传递选择器$（＆＃39; #wrap＆＃39;）以及所以解决方案是不够的。是否将新附加的内容附加到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);
    }
  }
});

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

1 个答案: