Question

我正在使用Acuity Scheduling作为项目。它使用prototype.js并允许我将自己的自定义代码添加到页面的页眉和页脚（通过iframe提供给我的网站）。我不熟悉prototype.js，所以我以一种不会冲突的方式使用jQuery。我的jQuery代码和prototype.js工作得很好，直到我添加了这段代码：

jQuery('body').html(jQuery('body').html().replace('an Appointment','a Session'));

我正在寻找一种方法，使用jQuery替换iframe中的特定单词，而不会破坏其他jQuery代码或prototype.js。

您可以在此处查看我的iframe内容：https://acuityscheduling.com/schedule.php?owner=11134756

如果您查看来源，您会看到我在底部添加的代码：

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

<script language="javascript">
  jQuery.noConflict();

  jQuery(document).ready(function(){
    jQuery('body').on('click', '.time-selection', function() {
      jQuery('.continueAlert').hide();   
      jQuery('#rest').append('<p class="continueAlert">Please enter your name and contact info below.</p>');  
    });

    jQuery('body').html(jQuery('body').html().replace('an Appointment','a Session'));

  });
</script>

感谢您提供的任何帮助！

Answer 1

我看到你通过针对特定元素的原型设置了一些事件监听器：

Event.observe(input, 'focus', function(){InputPrompt.focus(input);});
Event.observe(input, 'blur', function(){InputPrompt.blur(input);});
Event.observe(input, 'keypress', function(){input.label.hide();});

（可能会有更多，但这些是我能够快速发现的）

当你替换一个元素的innerHTML属性（你正在使用你的jQuery查找/替换片段）时，浏览器基本上“抛弃”旧的DOM元素并创建新的元素。因此，在您更新innerHTML之后，您在页面上看到的元素与您之前看到的不同，后者是附加了事件侦听器的元素。这就是为什么一切“停止工作”

我看到两个选项：

更新您的查找/替换脚本以仅更新文本节点。这将确保具有事件侦听器的包含元素不会被搞乱。
使用不针对特定元素的事件委派。查看Event.on，密切关注可选的'selector'参数。类似的东西：

document.on（'focus'，'input'，function（event，inputElement）{ InputPrompt.focus（inputElement）; }）;

我觉得第一个选项对本页已经建立的代码的侵扰性较小。

编辑：这是一个非常强力的方法来查找/替换所有文本节点（使用Prototype）。这可能是一种更有效的方法。不幸的是，你不能使用CSS选择器匹配文本节点，因此所有过滤的childNodes和诸如此类的东西 -

document.body.select('*:not(script)').each(function(el){
  $A(el.childNodes).each(function(child){
    if (child.nodeType === 3) { // only get text nodes
      child.nodeValue = child.nodeValue.replace('an Appointment', 'a Session');
    }
  })
});

在添加jQuery .replace（）后，Prototype.js停止工作，其他jQuery工作得很好

1 个答案: