jQuery在包含Bootstrap 5时停止工作

bnl4lu3b 于 2023-11-17 发布在 jQuery

关注(0)|答案(2)|浏览(123)

我一直在尝试创建一个按钮，当使用jQuery（最新版本3.7.1）点击时显示一些输入字段，它工作得很好。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

字符串
包括Bootstrap 5（稍后用于实现导航栏），它停止工作，当我点击按钮时什么也没有发生。
下面是我使用的代码：

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>jQuery and Bootstrap 5</title>
    
      
      <!-- including jQuery-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      
        
      <!-- including Bootstrap 5 -->
       <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
       <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
       
      <!-- jQuery code to make button work -->
       <script>
        $(document).ready(function(){
            
          $("#button").click(function() {
            $("#fn").show();
            $("#ln").show();
          });
        });
        </script>
    
  </head>
  <body>
      
      <input id="button" type="button" value="Click">
      <br>
      <div id="fn" hidden>First Name :
        <input type="text" />
      </div>
      <br>
      <div id="ln" hidden>Last Name :
        <input type="text" />
      </div>
      
  </body>

型
有什么方法可以让jQuery代码与Bootstrap一起工作吗？如果这是不可能的，有人能建议一种方法来实现相同的功能，只使用Bootstrap吗？
谢谢你，谢谢

jquery

来源：https://stackoverflow.com/questions/77481516/jquery-stops-working-when-including-bootstrap-5

2条答案

按热度按时间

avkwfej41#

如在参考文献中可以看到的，
因为[hidden]与jQuery的$（...）.hide（）和$（...）.show（）方法不兼容
你可以使用removeAttr（）方法，这对我很有效

$(document).ready(function(){
            
          $("#button").click(function() {
            $("#fn").removeAttr('hidden');
            $("#ln").removeAttr('hidden');
          });
        });

个字符

赞(0）回复(0）举报 2023-11-17

tktrz96b2#

您可以更新这些属性，以便它们添加/删除hidden属性，而不是停止使用.show()/.hide()。
以下是来自：https://gist.github.com/westonruter/399217的解决方案

（复制在这里的情况下，该页消失）*

jQuery hide（）和show（）支持HTML5隐藏属性

(function() {
  // jQuery hide() and show() supporting HTML5 hidden attribute
  // "All HTML elements may have the hidden content attribute set. The hidden
  // attribute is a boolean attribute. When specified on an element, it indicates
  // that the element is not yet, or is no longer, relevant. User agents should
  // not render elements that have the hidden attribute specified."
  // http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute
  // Pointers from http://www.bennadel.com/blog/1624-Ask-Ben-Overriding-Core-jQuery-Methods.htm

  var originalHide = jQuery.fn.hide;
  jQuery.fn.hide = function(duration, callback) {
    if (!duration) {
      originalHide.apply(this, arguments);
      this.attr('hidden', 'hidden');
    } else {
      var that = this;
      originalHide.apply(this, [duration, function() {
        that.attr('hidden', 'hidden');
        if (callback) {
          callback.call(that);
        }
      }]);
    }
    return this;
  };

  var originalShow = jQuery.fn.show;
  jQuery.fn.show = function(duration, callback) {
    if (!duration) {
      originalShow.apply(this, arguments);
      this.removeAttr('hidden');
    } else {
      var that = this;
      originalShow.apply(this, [duration, function() {
        that.removeAttr('hidden');
        if (callback) {
          callback.call(that);
        }
      }]);
    }
    return this;
  };

})();

字符串

赞(0）回复(0）举报 2023-11-17

我来回答

jQuery在包含Bootstrap 5时停止工作

2条答案

相关问题

热门标签

最新问答