如何解决Prototype和DataPicker或Tooltip之间的jQuery冲突？

我的后端应用程序出现问题。我在我的表单中有数据字段，为此我使用插件jQuery DataPicker。起初它工作正常 - 当我点击字段日历框弹出。问题是，当我实际选择任何日期时，日历和日期字段消失。如何解决Prototype和DataPicker或Tooltip之间的jQuery冲突？

我在开发工具（或Firebug）中检查了这个输入，并且我注意到样式'display：none'被添加到了我的输入中。

我的代码如下所示：

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看起来是这样的：

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，在这里我们再次去。

我试图从原型

Element.Methods = { 

    hide: function(element) { 
     element = $(element); 
     element.style.display = 'none'; 
     return element; 
    } 
}

我DataPicker工作删除此方法。我无法移除此方法，因为我的网页上的其他功能无法使用。

ToolTip存在类似的问题。当我将鼠标悬停在提示图标上时，ToolTip框出现，我可以正确地看到该消息。但是，当我将光标移开时 - 两个工具提示和相关对象（再次'显示：无'样式集）。

我在我的页面上有jQuery.noConflict，它不能解决这个问题。我该如何解决这个问题？请帮我:)

来源

2015-10-22 Adrian

为什么你真的首先需要2个DOM库？然而，正确执行noConflict应该可行 – charlietfl

。在line 510

this._trigger('hide');

在此方法中的JavaScript文件时，它试图触发jQuery的事件datpicker，因为jQuery的处理事件和它的外观自定义事件的方式在DOM对象上定义，然后方法去本地事件，然后自定义事件（我认为），所以它是找到Element#hide()方法设置样式display:none

所以2解决方案

注释行输出
如果您使用隐藏事件，请将该事件重命名为其他名称。我喜欢命名空间事件，例如datepicker:hide

来源

2015-10-22 20:27:36

如何解决Prototype和DataPicker或Tooltip之间的jQuery冲突？

回答

相关问题