代码不适用于 ajax 寻呼机答案

【问题标题】：Code doesn't work with ajax pager代码不适用于 ajax 寻呼机
【发布时间】：2015-05-10 00:37:53
【问题描述】：

我有这段代码可以将 youtube 链接转换为嵌入，但是我为我的论坛线程制作了 ajax 寻呼机，现在当我转到另一个页面时，链接不再变成嵌入（它是 drupal 和视图寻呼机）。该怎么办？

<script>
$(function() {
    $( "a:contains('youtu')" ).each(function() {
        var yt_url = this.href,
            yt_id = yt_url.split('?v=')[1],
            yt_title = $(this).text();
        $(this).replaceWith('<div class="youtube-box" style="background-image:url(http://img.youtube.com/vi/' + yt_id + '/0.jpg);"><span class="youtube-title">' + yt_title + '</span><span class="youtube-bar"><span class="yt-bar-left"></span><span class="yt-bar-right"></span></span><span class="youtube-play">Start</span></div>');
        $('div.youtube-box').click(function() {
            $(this).replaceWith('<iframe class="youtube-frame" src="http://www.youtube.com/embed/' + yt_id + '" allowfullscreen></iframe>');
        });
    });
});
</script>

【问题讨论】：

标签： jquery ajax drupal

【解决方案1】：

这是因为您的 javascript 在页面加载时运行，而不是在 ajax 调用之后运行。你应该使用drupal behaviors。 drupal 行为对象中的函数在页面加载后以及 ajax 调用完成后运行。
这样做：

(function($) {
      Drupal.behaviors.mybehavior = {
        attach:function(context, settings){

          $( "a:contains('youtu')", context ).each(function() {
              var yt_url = this.href,
                  yt_id = yt_url.split('?v=')[1],
                  yt_title = $(this).text();
              var newstuff = $('<div class="youtube-box" style="background-image:url(http://img.youtube.com/vi/' + yt_id + '/0.jpg);"><span class="youtube-title">' + yt_title + '</span><span class="youtube-bar"><span class="yt-bar-left"></span><span class="yt-bar-right"></span></span><span class="youtube-play">Start</span></div>');
              newstuff.click(function() {
                  $(this).replaceWith('<iframe class="youtube-frame" src="http://www.youtube.com/embed/' + yt_id + '" allowfullscreen></iframe>');
              });
              $(this).replaceWith(newstuff);
          });
        }
      };
})(jQuery);

我还稍微更改了代码以将新内容存储在一个变量中，这样就不必使用 jquery 再次选择它。
不过，这一切都未经测试。

【讨论】：