0

我正在为一个项目使用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>

谢谢你尽你所能的帮助！

4

1 回答 1

2

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

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 后在页面上看到的元素与您之前看到的元素不同，它们是附加了事件侦听器的元素。这就是为什么一切都“停止工作”

我看到两个选项：

  1. 更新您的查找/替换脚本以仅更新文本节点。这将确保具有事件侦听器的包含元素不会被弄乱。

  2. 使用不针对特定元素的事件委托。查看Event.on，密切注意可选的“选择器”参数。就像是：

    document.on('focus', 'input', function(event, inputElement) { InputPrompt.focus(inputElement); });

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

编辑：这是在所有文本节点上查找/替换的非常强力的方法（使用原型）。可能有一种更有效的方法来做到这一点。不幸的是，您不能使用 CSS 选择器来匹配文本节点，因此所有子节点的过滤等等 -

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');
    }
  })
});
于 2012-09-18T16:10:18.157 回答