CODEWITHSUNDEEP
jqueryjquery-uionclickjquery-ui-resizable
user1480192
user1480192

Reputation: 863

jquery ui resizable triggers onclick event

I have several divs on a page all with the "appt" class that have onclick events. I am trying to make the same divs resizable using jquery ui.

The problem is that the resize event triggers the onclick event. I have tried the following with no success:

$(".appt").resizable({.....}).on('resize', function (e) { e.stopPropagation(); });

Upvotes: 1

Views: 969

Answers (1)

Wouter Bouwman
Wouter Bouwman

Reputation: 1013

You can check if the element that is being clicked on is the actual element instead of the resizable handle. In the example below it will not execute the onclick functionality when clicking on the resizable handle.

$('.appt').click(function(e) {
  if (e.target === this) {
    console.log('I am being clicked');
  }
});

$('.appt').resizable();
.appt {
  height: 100px;
  width: 100px;
  border: 1px solid red;
}
<div class="appt"></div>
<div class="appt"></div>
<div class="appt"></div>
<div class="appt"></div>
<div class="appt"></div>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

Upvotes: 1

Related Questions