CODEWITHSUNDEEP
javascriptjqueryjquery-ui
mega-crazy
mega-crazy

Reputation: 858

Confused with calling JQuery custom function

I have html like so

<span rel='comm' val='12'>click</span>
<span rel='comm' val='82'>click</span>

and I am using JQuery to do this

$('span[rel*=comm]').cust();

and the custom function is as such

$.fn.cust = function () {

    $(this).click(function(e) {
        alert($(this).val());
    });
}

The value of this is 12 even when I click on 2nd span which should give me 82

Any help would be appreciated.

Upvotes: 0

Views: 60

Answers (6)

jakobhans
jakobhans

Reputation: 876

You can achieve what you're looking for with this:

HTML:

<span rel='comm' val='12'>click</span>
<span rel='comm' val='82'>click</span>

JS:

var cust = function(source) {
  alert($(source).attr('val'));
}

$('span[rel*=comm]').click(function(e) {
 cust(this);
});

The JSFiddle working: http://jsfiddle.net/ejquB/

Upvotes: 0

stackh34p
stackh34p

Reputation: 8999

The call $('span[rel*=comm]') returns a JQuery wrapper for all spans matching the selector - the two ones you have in your example are picked both.

Now inside the definition of cust, $(this) refers to the wrapped array, which causes your issue. Use 

$(this).each( function() { 
     $(this).click (...
});

Inisde each $(this) will point to each separate span element in the selection, so they will have the click handler individually attached and working as you expect.

Upvotes: 0

Shikiryu
Shikiryu

Reputation: 10219

It works if you use .attr('val')

$.fn.cust = function () {

    $(this).click(function(e){
      alert($(this).attr('val'));
    });
}
$('span[rel*=comm]').cust();

http://jsfiddle.net/fW7FT/

.val() is for input since they're the only one accepting the val attribute officialy

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

  • rel are for links (anchor element) - use class
  • use data attribute instead of custom attributes

http://jsbin.com/ogenev/1/edit

<span class='comm' data-val='12'>click</span>
<span class='comm' data-val='82'>click</span>


$.fn.cust = function(){

   $(this).click(function(){
      alert(this.dataset.val);
   });

};


$('.comm').cust();

Upvotes: 0

dfsq
dfsq

Reputation: 193261

This should work better:

$.fn.cust = function () {
    $(this).click(function (e) {
        alert($(this).attr('val'));
    });
}

span does not have value.

http://jsfiddle.net/dREj6/

Also if you want to make your method chainable you should return an jQuery instance:

$.fn.cust = function () {
    return $(this).click(function (e) {
        alert($(this).attr('val'));
    });
}

$('span[rel*=comm]').cust().css('color', 'red');

http://jsfiddle.net/dREj6/1/

Upvotes: 0

adeneo
adeneo

Reputation: 318182

You'll need to return a seperate function for each element in the collection, normally done with return this.each ...

$.fn.cust = function () {
   return this.each(function() {
      $(this).click(function(e){
          alert($(this).val());
       });
   });
}

And value is not a valid attribute for a span element.

Upvotes: 2

Related Questions