CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cela
cela

Reputation: 2500

On click event not working with jQuery

I am using jQuery to attach an on click handler for one of my drop down modals. I use the same syntax to open the modal, and it works fine. But when I want to close the modal the on click does not seem to work.

// When the user clicks the button, open the modal
$("#requestQuoteNavMap").click(function() {
  $("#myModal").show();
});

// When the user clicks close, close the modal
$("#close").click(function() {
  $("#myModal").hide();
});
.modal {
  background: white;
  border: 1px solid black;
}

.close {
  background: red;
  color: white;
  padding: 5px;
  font: bold 20px Verdana;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="requestQuoteNavMap">
  <!-- The Modal -->
  <div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
      <div class="modal-header" id="modal-header">
        <span class="close" id="close">×</span>
        <h3 class="modalHeaderTxt">Header</h3>
      </div>
      <div class="modal-body">
        <!--content here-->
      </div>
      <div class="modal-footer" id="modal-footer">Post</div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 67

Answers (2)

earl3s
earl3s

Reputation: 2373

Here's a jsfiddle showing what's up.

https://jsfiddle.net/e4tw7d5k/13/

When you click close, you're firing both click events right now, because close is inside the #requestQuoteNavMap. Events in javascript fire on the element you click first, and then "bubble up" to every element one at a time that contains that element. Usinging event.stopPropagation() will prevent the click event from propogating (bubbling up) to any other elements.

// When the user clicks the button, open the modal
$("#requestQuoteNavMap").click(function(){ 
  $("#myModal").show();
});

// When the user clicks anywhere outside of the modal, close it
$("#close").click(function(e){ 
	e.stopPropagation();
  $("#myModal").hide(); 
});
.modal {
  display: block;
  background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="requestQuoteNavMap">
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header" id="modal-header">
                <a href="#" class="close" id="close">×</a>
                <h3 class="modalHeaderTxt">Header</h3>
            </div>
            <div class="modal-body">
                <!--content here-->
            </div>
            <div class="modal-footer" id="modal-footer">Post</div>
        </div>
    </div>
</div>

Upvotes: 1

H77
H77

Reputation: 5967

Since the close button is within the div requestQuoteNavMap, any click on the close button will also be recognized as a click on the div. This will trigger both click events thereby first hiding and then showing the modal.

To prevent this you need to stop the click event from bubbling or propagating up to the close button's parent (the div) when it is clicked. You can do this by calling event.stopPropagation from within the click event of the close button.

e.g.

$("#close").click(function(event) {
  $("#myModal").hide();
  event.stopPropagation();
});

Upvotes: 3

Related Questions