Блог

Главная - Вопросы по программированию - как игнорировать дочерние поля при запуске события щелчка в полном документе

как игнорировать дочерние поля при запуске события щелчка в полном документе

#jquery #html #css

#jquery #HTML #css

Вопрос:

Это мой код для переключения div, я хочу, чтобы мой div с именем #credits переключался при нажатии на другую часть документа, этот код работает отлично, но есть проблема в том, что когда я нажимаю на форму этого div, в это время он также переключается. Пожалуйста, помогите мне предотвратить это.

 $(document).ready(function() {
  $('#add_stu').click(function() {
    $('#credits').slideToggle("slow");
  });
  $(document).click(function(e) {
    if (!$(e.target).parents().andSelf().is('#add_stu')) {
      $("#credits").slideUp("slow");
    }
  });
});  
 #credits {
  display: none;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary pull-right " id="add_stu" style="margin-bottom: 10px;"><b>Add Student</b>
</button>
<div id="credits" class="bg-white padded poop text-center">
  <!-- The user image in the menu -->
  <form action="#" class="form-horizontal">
    <div class="form-group field_wrapper text-center">
      <div>
        <input class="form-control " placeholder="First Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper text-center">

      <div>
        <input class="form-control " placeholder="Last Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper">
      <select class="form-control">
        <option selected value="val0">Add Student to a room</option>
        <option value="val1">Room A</option>
        <option value="val2">Room B</option>
        <option value="val3">Room C</option>
      </select>
    </div>
    <button class="btn btn-primary" type="submit" style="width:100%;">Create Student</button>
  </form>
</div>

Комментарии:

1. вы хотите нажать кнопку, а затем переключить эффект, есть ли?? правильно

2. нет, я просто хочу, чтобы при нажатии на поля ввода он не переключался

Ответ №1:

Попробуйте выполнить следующие условия:

Проверьте, не является ли элемент щелчка дочерним элементом кнопки или элемента credits, используя closest() 

 $(document).ready(function() {

  $('#add_stu').click(function() {
    $('#credits').slideToggle("slow");
  });
  $(document).click(function(e) {
    if (!($(e.target).closest('#add_stu').length || $(e.target).closest('#credits').length)) {

      $("#credits").slideUp("slow");
    }
  });

});  
 #credits {
  display: none;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary pull-right " id="add_stu" style="margin-bottom: 10px;"><b>Add Student</b>
</button>
<div id="credits" class="bg-white padded poop text-center">
  <!-- The user image in the menu -->
  <form action="#" class="form-horizontal">

    <div class="form-group field_wrapper text-center">

      <div>
        <input class="form-control " placeholder="First Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper text-center">

      <div>
        <input class="form-control " placeholder="Last Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper">
      <select class="form-control">
        <option selected value="val0">Add Student to a room</option>
        <option value="val1">Room A</option>
        <option value="val2">Room B</option>
        <option value="val3">Room C</option>
      </select>

    </div>
    <button class="btn btn-primary" type="submit" style="width:100%;">Create Student</button>
  </form>
</div>

Ответ №2:

Попробуйте этот отредактированный Jquery

 $(document).ready(function() {
var count = 1;
  $('#add_stu').click(function() {
  	count  
    if(count >1){
    $('#credits').slideToggle("slow");
    count--;
    }
    else{
    	  $("#credits").slideUp("slow");
    }
  });
  });  
 #credits {
  display: none;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary pull-right " id="add_stu" style="margin-bottom: 10px;"><b>Add Student</b>
</button>
<div id="credits" class="bg-white padded poop text-center">
  <!-- The user image in the menu -->
  <form action="#" class="form-horizontal">
    <div class="form-group field_wrapper text-center">
      <div>
        <input class="form-control " placeholder="First Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper text-center">

      <div>
        <input class="form-control " placeholder="Last Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper">
      <select class="form-control">
        <option selected value="val0">Add Student to a room</option>
        <option value="val1">Room A</option>
        <option value="val2">Room B</option>
        <option value="val3">Room C</option>
      </select>
    </div>
    <button class="btn btn-primary" type="submit" style="width:100%;">Create Student</button>
  </form>
</div>

Ответ №3:

  1. Внутри #add_stu события щелчка — добавить stopPropagation (чтобы убедиться, что щелчок не выводит дерево DOM на document .
  2. Внутри document события щелчка — проверьте, есть ли у текущей цели какой-либо родитель #credits 

 $(document).ready(function() {
  $('#add_stu').click(function(e) {
    e.stopPropagation();
    $('#credits').slideToggle("slow");
  });
  $(document).click(function(e) {
    if (!$(e.target).parents('#credits').length > 0) {
      $("#credits").slideUp("slow");
    }
  });
});  
 #credits {
  display: none;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary pull-right " id="add_stu" style="margin-bottom: 10px;"><b>Add Student</b>
</button>
<div id="credits" class="bg-white padded poop text-center">
  <!-- The user image in the menu -->
  <form action="#" class="form-horizontal">
    <div class="form-group field_wrapper text-center">
      <div>
        <input class="form-control " placeholder="First Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper text-center">

      <div>
        <input class="form-control " placeholder="Last Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper">
      <select class="form-control">
        <option selected value="val0">Add Student to a room</option>
        <option value="val1">Room A</option>
        <option value="val2">Room B</option>
        <option value="val3">Room C</option>
      </select>
    </div>
    <button class="btn btn-primary" type="submit" style="width:100%;">Create Student</button>
  </form>
</div>