CODEWITHSUNDEEP
jqueryhtml
Mohamed Al-ashraf Khalid Alfee
Mohamed Al-ashraf Khalid Alfee

Reputation: 31

Jquery Click Event is Not firing for Span

The click event is not triggering either for the span or the <i> when I move the id to the <i> tag.

$("body").on("click", "#btnClear", function() {
  alert("Clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span title="Tüm Liste" style="cursor: pointer;" class="input-group-addon" id="btnClear"><i class="glyphicon glyphicon-home"></i></span>
  <input type="text" class="form-control" id="txtSearch" placeholder="GTIP KOD veya Ürün Adı" aria-describedby="basic-addon2">
</div>

Upvotes: 2

Views: 3719

Answers (3)

Saranya Rajendran
Saranya Rajendran

Reputation: 757

Try this.

$("body").delegate("#btnClear", "click", function () {
    alert("Clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="input-group">
   <span title="Tüm Liste" style="cursor: pointer;" class="input-group-addon" id="btnClear">
   <i class="glyphicon glyphicon-home"></i>
   </span>
   <input type="text" class="form-control" id="txtSearch" placeholder="GTIP KOD veya Ürün Adı" aria-describedby="basic-addon2">
</div>

Upvotes: 0

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7309

Your span is not being displayed, that's the issue.

You JS is working fine. I gave border to your span.

$("body").on("click", "#btnClear", function() {
  alert("Clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<div class="input-group">

  <span title="Tüm Liste" style="cursor: pointer; min-width:40px;" class="input-group-addo" id="btnClear"><i class="glyphicon glyphicon-home"></i></span>
  <input type="text" class="form-control" id="txtSearch" placeholder="GTIP KOD veya Ürün Adı" aria-describedby="basic-addon2">
</div>

Upvotes: 0

Sinto
Sinto

Reputation: 3997

I think your code is working. There is no issue except, you have forgot to load jquery 

$("body").on("click", "#btnClear", function() {
  alert("Clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span title="Tüm Liste" style="cursor: pointer;" class="input-group-addon" id="btnClear">ICON HERE.. CLICK</span>
  <input type="text" class="form-control" id="txtSearch" placeholder="GTIP KOD veya Ürün Adı" aria-describedby="basic-addon2">
</div>

I do not have icon to show there so I have placed a text to click there.

Hope its helped.

Upvotes: 2

Related Questions