How to make an onblur event not to work in a special div

Question

I have an <input> textbox and a <div> containing the name of cities.

On click of the div's content, I do populate the textbox with the corresponding city name, this works.

I also need to fire an alert when the <input> textbox loses focus. To do this, I used the onblur event.

The problem is that this onblur event will also fire when the user clicks on one of the city names <div> , while it should not.

What can I do to fire the alert only when the blur event is not caused by a click to one of these <div> ?

 function clicking(s) { $(s).closest(".search_div").find(".country").val($(s).find(".txtcountry").text()) $(s).closest(".search_div").find(".co-id").val($(s).find(".countryid").val()) $(s).closest(".search_div").find(".co").empty(); } $('.country').each(function() { $(this).on('blur', function() { alert("hello") }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="search_div"> <input class="country" value="" type="text" /> <input type="hidden" class="co-id" value="" /> <div class="co" style="border:1px solid red;"> <div class="selectCountry" onClick="clicking(this)"> <input type="hidden" value="1198418" class="countryid" /> <span class="txtcountry"> <i class="fa fa-arrow-right"></i> Turkey-Ankara</span> </div> <div class="selectCountry" onClick="clicking(this)"> <input type="hidden" value="1198425" class="countryid" /> <span class="txtcountry"> <i class="fa fa-arrow-right"></i> Turkey-Istanbul</span> </div> </div> </div> 

Answer 1

It was working even without this trick, so i think it depends on the browser. Here's a solution:

 var menuHover = 0; function clicking(s) { $(s).closest(".search_div").find(".country").val($(s).find(".txtcountry").text()); $(s).closest(".search_div").find(".co-id").val($(s).find(".countryid").val()); $(s).closest(".search_div").find(".co").empty(); menuHover = 0; } $('.selectCountry').on({ mousedown: function() { menuHover = 1; }, click: function() { menuHover = 1; }, mouseleave: function() { menuHover = 0; } }); $('.country').each(function() { $(this).on('blur', function() { if (menuHover == 0) { alert("hello"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="search_div"> <input class="country" value="" type="text" /> <input type="hidden" class="co-id" value="" /> <div class="co" style="border:1px solid red;"> <div class="selectCountry" onClick="clicking(this)"> <input type="hidden" value="1198418" class="countryid" /> <span class="txtcountry"> <i class="fa fa-arrow-right"></i> Turkey-Ankara</span> </div> <div class="selectCountry" onClick="clicking(this)"> <input type="hidden" value="1198425" class="countryid" /> <span class="txtcountry"> <i class="fa fa-arrow-right"></i> Turkey-Istanbul</span> </div> </div> </div> 

Answer 2

Try next script:

function OnBlur() { 
  if (!$('.co').data('clicked')) {
    alert("hello");
  }
}
$(document).ready(function() {
  $('.co').click(function() {
    $('.co').data('clicked', true);
  });

  $('.country').click(function() {
    $('.co').data('clicked', false);
  });

  $('.country').on('blur',function() {
    setTimeout(OnBlur, 500);
  });
});

Just setting a handler for .co click didn't help, because blur triggers first. So you should use setTimeout() . Also you should add $('.country').click() handler to refresh the data each time.