jQuery stops working when including Bootstrap 5

momiqb
November 15, 2023
84 views
1 vote
2 Answers

I’ve been trying to create a button that shows some input fields when clicked using jQuery (latest version 3.7.1) and it works just fine. However, when I add the tags

<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>

to include Bootstrap 5 (used later to implement a navigation bar), it stops working and when I click the button nothing happens.

Here is the code I used:

<!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>

Is there any way I can make the jQuery code work with Bootstrap?
If this is not possible, can anyone suggest a way to implement the same functionality using Bootstrap only?

Thank you!

Tags: bootstrap-5 jquery

Answers

as can be seen in the reference

Since [hidden] is not compatible with jQuery’s $(…).hide() and
$(…).show() methods

you can use removeAttr() method, this worked for me

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

<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>
       
   
  </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>
</html>

Rather than stop using .show() / .hide() you can update these so that they add/remove the hidden attribute.

Here’s a solution from: https://gist.github.com/westonruter/399217

(duplicated here in-case that page disappears)

jQuery hide() and show() supporting HTML5 hidden attribute

(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;
  };

})();

Please signup or login to give your own answer.

Click here to cancel reply.