How can i take all specific span and invoke click event based on id?

Question

Currently i am doing as below

<script type="text/javascript">
$(document).ready(function () {
debugger;
$('#Draft').live('click', function () {
alert("I am Draft Here");
});

$('#Live').live('click', function () {
alert("I am live Here");
});

$('#Completed').live('click', function () {
alert("I am completed Here");
});
});
</script>

I am fetching each element's id and based on that invoking alert on click event of that.

Is there any way in which i can fetch all span elements, say whose style attribute is like style="color:

Below are like my span elements on page

<span style="color:#F3660E;" id="Draft">Draft: (2138)</span>

I am new to jquery, please suggest on this

you can do this using `class name` instead of `style ="color:#color"`. — Jignesh Khokhariya, Apr 17 '15 at 11:12
Add a common class then use it like http://jsfiddle.net/satpalsingh/1ea99qsc/ — Satpal, Apr 17 '15 at 11:13

score 0 · Accepted Answer · answered Apr 17 '15 at 11:13

You can give them all a class, e.g.:

<span class="thingy" id="Draft">Draft: (2138)</span>

(You can remove the id unless you're going to use it for something.)

Then:

$(document.body).on("click", ".thingy", function() {
    // `this` will be the span element
});

Example:

$(document.body).on("click", ".thingy", function() {
  $("<p>").html("You clicked " + this.id).appendTo(document.body);
});

.thingy {
  color: #F3660E;
  border: 1px solid black;
}

<div>
  <span class="thingy" id="Draft">Draft: (2138)</span>
  <span class="thingy" id="Live">Live: (1234)</span>
  <span class="thingy" id="Completed">Completed: (4321)</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Note that in the above I used on, not live. live was deprecated several versions ago and removed a couple of versions back. on is how you do this with any recent version of jQuery.

score 0 · Answer 2 · answered Apr 17 '15 at 11:15

You can add a common class to all the elements.

<span class="myClass" id="Draft">Draft: (2138)</span>

Then you can bind event use class .myClass

$('.myClass').on('click', function () {
    //Here this refers to span, element which invoked the event
    alert("I am " + this.id + " Here"); 
});

DEMO

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

You can also use click. For a short description of difference between click and on look at answer in Why use jQuery on() instead of click()

For your example I would probably just use //because it's shorter :)

$('.someClass').click(function(){
alert("I am someClass");
});

edited May 23 '17 at 12:22

Community

1
1

answered Apr 17 '15 at 11:18

Lau Frie

59
6

How can i take all specific span and invoke click event based on id?

3 Answers3