如何解决在Prototype和DataPicker或Tooltip之间的jQuery冲突？ [英] How to solve jQuery conflict between Prototype and DataPicker or Tooltip?
问题描述
我的后端应用程式有问题。
我有我的形式的数据字段，为此我使用插件jQuery DataPicker。起初它工作正常 - 当我点击字段日历框弹出。问题是，当我实际选择任何日期，日历和日期字段消失。
I have a problem with my backend aplication. I have data field in my form, for which I am using plugin jQuery DataPicker. At first it works fine - when I click on the field calendar box pops up. The problem is that when I actually select any date, the calendar and the date field disappear.
我在开发工具（或Firebug）检查了这个输入， 'display：none'添加到我的输入。
I checked this input in Developer Tools (or Firebug) and I noticed that style 'display: none' was added to my input.
我的代码如下所示：
HTML
$ b
HTML
<head>
// prototype version 1.7
<script type="text/javascript" src="js/prototype.js"></script>
<script src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script src="js/bootstrap-datepicker.js"></script>
</head>
..
<div class="form-group" id="data_1">
<label>Creation date</label>
<div class="input-group date">
<input type="text" class="form-control valid" name="CreationDate"
id="CreationDate" value="29.09.2015" aria-invalid="false">
</div>
</div>
后来：
...
<div class="input-group date" style="display: none;">
...
代码jQuery看起来像这样：
Code jQuery looks like this:
jQuery
jQuery(document).ready(function ($) {
..
$('#data_1 .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: "dd.mm.yyyy"
});
..
});
当我禁用Prototype时，
然后我启用Prototype，这里我们再次。
When I disable Prototype then my input works great! Then I'm enabling Prototype and here we go again.
我试图从Prototype中删除此方法
I tried to remove this method from Prototype
Element.Methods = {
hide: function(element) {
element = $(element);
element.style.display = 'none';
return element;
}
}
我的DataPicker工作。我无法删除此方法，因为我的页面上的另一个功能将不起作用。
my DataPicker worked. I can't remove this method because another function on my page won't work.
ToolTip有类似的问题。当我将鼠标悬停在提示图标上时，ToolTip框出现，我可以正确地看到该消息。但是当我将光标移开时，工具提示和相关对象（再次display：none样式集）。
There is similar problem with ToolTip. When I hover over the hint icon ToolTip box appears and I can see the message properly. But when I move the cursor away then both - the tooltip and related object (again 'display: none' style set).
我的页面上有jQuery.noConflict，它不解决这个问题。
我如何解决这个问题？请帮助我：）
I have jQuery.noConflict on my page and it doesn`t solve this problem. How can I solve this problem? Please, help me :)
推荐答案
在datpicker的javascript文件 line 510
In the datpicker javascript file at line 510
this._trigger('hide');
在这个方法中，它尝试触发一个jQuery事件，因为jQuery处理事件的方式，自定义事件它将查看在DOM对象上定义的方法，然后去本地事件，然后自定义事件（我认为），所以它是找到 Element＃hide（）方法，将样式设置为 display：none
Inside this method it is attempting to fire a jQuery event, because of the way that jQuery handles events and custom events it will look at the methods defined on the DOM object, and then go to native events and then custom events (I think) so it is finding the Element#hide() method that sets the style to display:none
所以2个解决方案
- 如果您使用隐藏事件，请将该事件重命名为其他名称，然后注释
- 。我喜欢命名该事件，例如
datepicker：hide
- comment that line out
- if you are using the hide event, rename the event to a different name. I like namespacing the event, eg
datepicker:hide
这篇关于如何解决在Prototype和DataPicker或Tooltip之间的jQuery冲突？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
