Блог

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

Предупреждение не отображается после щелчка

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть этот код:

 <div class="form-group">
    <div class="form-group has-feedback">
        <input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
        <span class="glyphicon glyphicon-search form-control-feedback glyphiconColor showActionAfterClick"></span>
    </div>
</div>

Jquery

 $(document).ready(function() {
    $('.showActionAfterClick').click(function() {
        alert('ok');
    });
});

Этот код был создан в bootstrap.

Мне нужно показать окно предупреждения после щелчка showActionAfterClick по классу, но оно не работает.

Как я могу это исправить?

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

1. $(‘.showActionAfterClick’) между ними не должно быть пробела. и имя класса

2. обратите внимание на пробел в спецификаторе имени класса, он должен быть .showActionAfterClick

3. это не помогает: (

4. У вас есть пробел между вашим селектором и именем класса $('. showActionAfterClick') , кроме того, у вас нет ничего внутри span, поэтому вы можете не знать, используете ли вы его на самом деле click

Ответ №1:

У вас есть пробел между вашим идентификатором класса ( . ) и вашим именем класса showActionAfterClick :

 $(document).ready(function() {
  $('.showActionAfterClick').click(function() {
    alert('ok');
  });
});  
 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="form-group ">
  <div class="form-group has-feedback ">
    <input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
    <span class="glyphicon glyphicon-search form-control-feedback glyphiconColor showActionAfterClick">Text to see this button</span>
  </div>
</div>

Ответ №2:

В данном случае это произошло потому, что span является встроенным элементом, и его размер ширины зависит от его содержимого. Таким образом, элемент span не имеет ширины, и вы не можете щелкнуть по нему и вызвать предупреждение (помимо плохого синтаксиса в вашем селекторе запросов jquery). Пример @Jack Bashford работает, потому что элемент span содержит текст внутри, и это обеспечивает ширину этого элемента.

Ответ №3:

 <div class="form-group ">
<div class="form-group has-feedback ">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span id ="showActionAfterClick" class="glyphicon glyphicon-search form-control-feedback glyphiconColor">Click ME!</span>
</div>
</div>



$(document).ready(function() {
    $('#showActionAfterClick').click(function() {
            alert('ok');
        });
});

добавьте идентификатор в свой тег span вместо class и замените. с помощью # и попробуйте сейчас

Ответ №4:

Используйте это

 <div class="form-group ">
<div class="form-group has-feedback ">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span onclick="test()" class="glyphicon glyphicon-search form-control-feedback glyphiconColor"></span>
</div>
</div>


<script>
function test(){
alert("ok");
}
</script>