event for class change using jQuery and recieving the element's content

Question

Is there any jQuery event that fires when a class is added to some object, which can tell me what is the element's content? let me explain using an example. Let's say I have a series of divs, all having the same class but different content.

<div class="block">content a</div>
<div class="block">content b</div>
<div class="block">content c</div>
<div class="block">content d</div>

At some moment, one of them will get an additional class, let's say selected:

<div class="block">content a</div>
<div class="block">content b</div>
<div class="block selected">content c</div>
<div class="block">content d</div>

I can't know whitch one id the selected one. So I want to run a function when one of these items gets the selected class and I want that function to receive the content of the selected element.

$('.block').on('event?', function(content){
  //content is equal to "content c"

});

Is there something like that available in jQuery? Can I create one?

You can trigger custom events with `jQuery.trigger('YourEventHere');` — crush, Jan 09 '14 at 19:54
how will one of the element get the "selected" class? on an event? programatically? manually? — wirey00, Jan 09 '14 at 19:55
On a mouse hover, but not directly. If I can't do it without using the mouse event it would be fine. — Reuven Karasik, Jan 09 '14 at 20:22
@ReuvenKarasik if you really want to detect on attribute change you can look at this example http://stackoverflow.com/a/17172729/1385672 - though I think you should be able to do what you want when you "add" the `selected` class — wirey00, Jan 09 '14 at 20:38
yes but here's the point I'm not adding the selected class. the truth is that I use twitter-typeahead and I want to call a function when the user is highlighting a suggestion with his mouse, and the best way I found to do that is to track the class "active" — Reuven Karasik, Jan 09 '14 at 21:02

score 1 · Accepted Answer · edited Jan 10 '14 at 10:12

1

I have a plugin for you.

Insert this into you script:

//@Author Karl-André Gagnon
$.hook = function(){
    var arg = Array.prototype.slice.call(arguments)
    $.each(arg, function(){
        var fn = this
            if(!$.fn['hooked'+fn]){
            $.fn['hooked'+fn] = $.fn[fn];
            $.fn[fn] = (function(){
                this['hooked'+fn].apply(this, arguments);
                this.trigger(fn, arguments);
            })
        }
    })
}

Then activate it like that:

$.hook('addClass');

This will add an "event launcher" on add class.

Then bind it on you block :

$('.block').on('addClass', function(e,a){ //e == events a == first arguments when calling addClass()
   if(a === "selected"){//Just a validation
       //Your code
   }
})

edited Jan 10 '14 at 10:12

Reuven Karasik

475
5
14

answered Jan 09 '14 at 21:06

Karl-André Gagnon

33,662
5
50
75

Awesome. It's activating on every class added, or do I need to specify a specific class name to monitor? – Reuven Karasik Jan 10 '14 at 09:28
I didn't notice the validation. But `alert($(a).text());` doesn't work. I thought `a` is an object and you had a mistake on the validation, but now I realize it's not. Can you help me alert the content of the changed object? (Also: you had a few mistakes, you wrote a1 instead of `a` and `addClas` instead of `addClass`. I had to make 6 changes until the StackOverflow accepted my edit :) – Reuven Karasik Jan 10 '14 at 10:15
1

The target will be `this`, so you can do `$(this).text();`. Also thank for the edit, had to adapt my code for you but i just did a small check up. – Karl-André Gagnon Jan 10 '14 at 13:17
1

Thank you. It works now, that's a brilliant plugin :) – Reuven Karasik Jan 11 '14 at 16:14

score 0 · Answer 2 · answered Jan 09 '14 at 19:54

0

You can get its text using this:

$('element').text();

This will provide you with the text of the element!

For you, this would be

$('.selected').text();

Now you can show it as an alert, or write it somewhere or use it as a variable! It will have the value of

content c

Or what ever the value the element would provide you with!

For more: http://api.jquery.com/text/

answered Jan 09 '14 at 19:54

Afzaal Ahmad Zeeshan

15,669
12
55
103

But how do I execute this commant each time a `.block` element gets the `.selected` class? – Reuven Karasik Jan 09 '14 at 20:23
you can add this to the function which is adding the class @reuven – Afzaal Ahmad Zeeshan Jan 10 '14 at 06:31
I'm not adding the class, It's the Typeahead plugin that adding the class to a suggestion when the mouse is on one. – Reuven Karasik Jan 10 '14 at 09:17
1

Then you can add that to the function of mouseover as: `$('element').mouseover(function () { }` .. this way, when the class is being added .. the function will run! – Afzaal Ahmad Zeeshan Jan 10 '14 at 14:51

score 0 · Answer 3 · edited Jan 10 '14 at 14:52

0

function test(someClass){
  var content;
  if($('.block').hasClass(someClass)) {
     content = $('.' + someClass).html();
  }
}

Then you call the function with the class of your wish as a parameter: test('classname');

edited Jan 10 '14 at 14:52

Afzaal Ahmad Zeeshan

15,669
12
55
103

answered Jan 09 '14 at 21:18

n1kkou

3,096
2
21
32

event for class change using jQuery and recieving the element's content

3 Answers3