Prototype.js在添加jQuery .replace()之后停止工作，其他jQuery都可以正常工作 [英] Prototype.js stops working after adding jQuery .replace(), other jQuery works just fine
问题描述
我正在为项目使用视力调度.它使用了prototype.js，并允许我将自己的自定义代码添加到页面的页眉和页脚(通过iframe投放到我的网站).我不熟悉prototype.js，因此我以不会冲突的方式使用jQuery.在添加以下代码之前，我的jQuery代码和prototype.js正常运行:
I am using Acuity Scheduling for a project. It uses prototype.js and allows me to add my own custom code to the head and footer of the page (served to my site via iframe). I'm not familiar with prototype.js, so I'm using jQuery in a way that it won't conflict. My jQuery code and prototype.js were working just fine, until I added this code:
jQuery('body').html(jQuery('body').html().replace('an Appointment','a Session'));
我正在寻找一种使用jQuery替换iframe中特定单词而不破坏其他jQuery代码或prototype.js的方法.
您可以在此处查看我的iframe的内容: https://acuityscheduling.com/schedule. php?owner = 11134756
You can see the content of my iframe here: https://acuityscheduling.com/schedule.php?owner=11134756
如果您查看源代码，则会在底部看到我添加的代码:
If you view the source, you'll see the code I added at the bottom:
<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>
感谢您提供的任何帮助！
Thanks for any help you can offer!
推荐答案
我看到您通过针对特定元素的原型设置了一些事件监听器:
I see you have some event listeners setup by prototype targeting specific elements:
Event.observe(input, 'focus', function(){InputPrompt.focus(input);});
Event.observe(input, 'blur', function(){InputPrompt.blur(input);});
Event.observe(input, 'keypress', function(){input.label.hide();});
(可能有更多，但是这些是我能够快速发现的)
(there may be more of them, but these were what I was able to quickly spot)
当替换元素的innerHTML属性(这是对jQuery查找/替换代码片段所做的事情)时，浏览器基本上会丢弃"旧的DOM元素并创建新的DOM元素.因此，在更新innerHTML之后，您在页面上看到的元素与以前看到的元素不同，它们是附加了事件侦听器的元素.这就是为什么一切都停止工作"的原因
When you replace an element's innerHTML property (which is what you're doing with your jQuery find/replace snippet), the browser basically "throws away" the old DOM elements and creates new ones. So the elements you're seeing on the page after you update innerHTML aren't the same once you were previously seeing, which were the ones that have the event listeners attached to them. That's why everything "stopped working"
我看到两个选择:
-
将查找/替换脚本更新为仅更新文本节点.这样可以确保不会混淆具有事件侦听器的包含元素.
Update your find/replace script to only update text nodes. That will ensure that the containing elements that have the event listeners won't get messed with.
使用不针对特定元素的事件委托.查看 Event.on ，并密切注意可选的选择器"参数.像这样:
Use event delegation that doesn't target specific elements. Check out Event.on, paying close attention to the optional 'selector' parameter. Something like:
document.on('focus'，'input'，function(event，inputElement){ InputPrompt.focus(inputElement); });
document.on('focus', 'input', function(event, inputElement) { InputPrompt.focus(inputElement); });
我觉得第一个选项对此页面上已建立的代码的干扰较小.
I feel like the the first option would be less intrusive to the code that's already established on this page.
这是一种在所有文本节点上查找/替换的非常强力的方法(使用原型).可能有一种更有效的方法.不幸的是，您不能使用CSS选择器在文本节点上进行匹配，因此对childNodes进行了所有过滤-
Here's a very brute-force method to find/replace on all text nodes (using Prototype). There's probably a more efficient way of doing this. Unfortunately, you can't use a CSS selector to match on text nodes, hence all the filtering of childNodes and whatnot -
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');
}
})
});
这篇关于Prototype.js在添加jQuery .replace()之后停止工作，其他jQuery都可以正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
