加载 Ajax（过滤器）后加载 jQuery 脚本

Question

我目前在同一页面上运行几个 jQuery 脚本，这个特定页面上有一个产品过滤器（使用 ajax）。 http://www.ctagroup.com.au/cta-group-home/products/selector/

我正在使用的一个脚本是这样的：

var $s = jQuery.noConflict();
$s('body').each(function () {
$s(this).html($s(this).html().replace(/(\®)/g, '<sup>®</sup>'));
});

因此，每个 ® 都会在站点范围内相应地使用。 单击过滤器选项后，它会在不运行我的脚本的情况下返回。

如何在每次使用 ajax 过滤器时再次运行此脚本？

Answer 1

我不知道你是否需要jQuery.noConflict();，我不明白你为什么真的需要；但这是一个没有它的例子。注意我不喜欢你这样做的方式，使用你的页面我有点专注。您可以根据需要修改它，使用选择器定位特定元素。

在名为 customFixReg

的某处放置一个自定义事件处理程序

jQuery(document).on('customFixReg', function() {
  jQuery('.sf-result').find('.prod-cont-selector').find('p')
    .filter(':contains("®")').each(function() {
        jQuery(this).html(jQuery(this).html()
           .replace(/(\®)/g, '<sup>®</sup>'));
  });
});

编辑：不喜欢双选择器这也有效：

jQuery(document).on('customFixReg', function() {
  jQuery('.sf-result').find('.prod-cont-selector').find('p')
      .filter(':contains("®")').html(function(i, val) {
          return val.replace(/(\®)/g, '<sup>®</sup>');
      });
});

那么，什么时候；在你需要的地方，触发它：

jQuery(document).trigger('customFixReg');

我抓取了一些内容并在这里进行了测试：https://jsfiddle.net/MarkSchultheiss/j787Ljzz/

参考评论，您的页面在页面上的连续行中有这个：所以它根据之前的代码中断。页面第 789 行：

 <script>
var $s = jQuery.noConflict();
$s('body').each(function () {
$s(this).html($s(this).html().replace(/(\®)/g, '<sup>®</sup>'));
});
</script>

<script>
jQuery(document).on('customFixReg', function() {
  jQuery('ul.sf-result').find('.prod-cont-selector').find('h3,p')
    .filter(':contains("®")').each(function() {
        jQuery(this).html(jQuery(this).html()
           .replace(/(\®)/g, '<sup>®</sup>'));
  });
});
</script>

编辑：如果触发器重复出现，我发现了一个错误，它会自动换行，因此我将带有子 <sup> 元素的那些过滤掉。

jQuery(document).on('customFixReg', function() {
  jQuery('.sf-result').find('.prod-cont-selector').find('p,h3').filter(':contains("®")')
    .filter(function() {
      return !$(this).children('sup').length;
    })
    .each(function() {
      jQuery(this).html(function(i, val) {
        return val.replace(/(\®)/g, '<sup>®</sup>');
      });
    });
});

更新示例：https://jsfiddle.net/MarkSchultheiss/j787Ljzz/4/