如何解决jQuery Prototype与DataPicker或Tooltip的冲突？

Question

我的后端应用程序有问题。我的表单中有数据字段，为此我使用插件 jQuery DataPicker。起初它工作正常 - 当我点击弹出的字段日历框时。问题是，当我实际上 select 任何日期时，日历和日期字段都会消失。

我在开发人员工具（或 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 也有类似的问题。当我将鼠标悬停在提示图标上时，会出现工具提示框，我可以正确地看到该消息。但是当我将光标移开时 - 工具提示和相关对象（再次 'display: none' 样式集）。

我的页面上有 jQuery.noConflict，但它并没有解决这个问题。我怎么解决这个问题？请帮帮我 :)

Answer 1

在 line 510

的 datpicker javascript 文件中

this._trigger('hide');

在这个方法中，它试图触发一个 jQuery 事件，因为 jQuery 处理事件和自定义事件的方式，它将查看 DOM 上定义的方法对象，然后转到本机事件，然后转到自定义事件（我认为），因此它找到了将样式设置为 display:none

的 Element#hide() 方法

所以 2 个解决方案

评论那一行
如果您正在使用隐藏事件，请将事件重命名为其他名称。我喜欢命名事件，例如 datepicker:hide

如何解决jQuery Prototype与DataPicker或Tooltip的冲突？

How to solve jQuery conflict between Prototype and DataPicker or Tooltip?

javascript

jquery

html

css

prototypejs