单击后不显示警报

Question

I have this code:

<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');
    });
});

This code was created in bootstrap.

I need to show alert box after click showActionAfterClick class, but it's not working.

How can I repair it?

Answer 1

You have a space between your class identifier ( . ) and your classname 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>

Answer 2

In this case, this happend because the span is an inline element and its width size depends of its content. So the span element have not width and you can't click it and trigger the alert (besides the bad syntax in your jquery query selector). The @Jack Bashford example works because the span element has text inside and this provides the width to that element.

Answer 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');
        });
});

add id in your span tag instead of class and replace . with # and try now

Answer 4

Use this

<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>