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

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

本文关键字：Tooltip 之间 冲突 jQuery DataPicker 何解决 解决 Prototype      更新时间：2023-09-26

我的后端应用程序有一个问题。我有数据字段在我的形式，为此我使用插件jQuery DataPicker。起初它工作得很好-当我点击字段日历框弹出。问题是，当我实际选择任何日期时，日历和日期字段会消失。

我在Developer Tools(或Firebug)中检查了这个输入，我注意到样式'display: none'被添加到我的输入中。

我的代码是这样的:

<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，又来了。

我试图从原型

中删除此方法
Element.Methods = {
   hide: function(element) {
      element = $(element);
      element.style.display = 'none';
      return element;
   }
}

我的DataPicker工作。我不能删除这个方法，因为我页面上的另一个函数不起作用。

工具提示也有类似的问题。当我将鼠标悬停在提示图标上时，工具提示框出现，我可以正确地看到消息。但是当我将光标移开时，工具提示和相关对象(再次'display: none'样式设置)。

我有jQuery。在我的页面上没有冲突，它不能解决这个问题。我该如何解决这个问题?

在datpicker javascript文件的第510行

this._trigger('hide');

在这个方法中，它试图触发一个jQuery事件，因为jQuery处理事件和自定义事件的方式，它会查看DOM对象上定义的方法，然后去本地事件，然后自定义事件(我认为)所以它是找到Element#hide()方法设置的样式为display:none

所以有两个解

  1. 注释出
  2. 如果您正在使用隐藏事件，请将事件重命名为不同的名称。我喜欢给事件设置命名空间，例如datepicker:hide
相关文章：