jQuery click anywhere except a div

Question

I have the function below to add text to another input. when I click anywhere on the page I want to show an alert message furthermore when I click on texts I want to run the special function for them but, in all conditions, it considers $(document).click part. How can I define all part of my page except that specific div?

here is my code :

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();
}
$(document).click(function(event) {
  alert("hello")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

Possible duplicate of [Use jQuery to hide a DIV when the user clicks outside of it](https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) — Pranav Singh, Mar 04 '18 at 11:49

Mamun · Accepted Answer · 2018-03-04T11:57:23.970

Simply return from function if event.target is the div. Try the following way:

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();
}
$(document).click(function(event) {
  if($(event.target).hasClass('country') || $(event.target).hasClass('co') || $(event.target).hasClass('txtcountry'))
    return;
  alert("hello")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

It's not correct because when I click on the city names I dont want to show the alert. I want to show the alert when a user clicks on the body not that part — inaz, Mar 04 '18 at 11:51

score 0 · Answer 2 · answered Mar 04 '18 at 11:51

0

Make use of the .not() method:

$(document).not('.selectCountry').on('click', function(e) {
    // Handle event gracefully
    e.preventDefault();

    alert('Hello');
});

answered Mar 04 '18 at 11:51

baeyun

228
1
6

jQuery click anywhere except a div

2 Answers2