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

Posted 2023-05-09

【中文标题】Ajax 附加的内容选择器没有响应

【英文标题】：Ajax appended content selectors not responding

【发布时间】：2016-06-27 00:56:12

【问题描述】：

我有一个非常特殊的问题，我通过 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')

任何指针将不胜感激。

【参考方案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 函数设置了一个超时，该函数在第一个 ajax 调用后 30 秒被调用，以确保在插入新内容之前附加 blog-wrap。我正在寻找的解决方案是通过 ajax 将 $('#wrap') 插入 DOM 后使用它的方法

那时我可能不理解这个问题。一旦元素在 DOM 中，通过 ajax 回调或其他方式，您应该能够使用 jquery 选择器访问它，如 $("#wrap")。也许问题出在砖石上，不管它在你自己调用masonry() 之前做什么。

你可能已经看过了，这里是initialize masonry with jquery