jQuery: how to include attributes on click during .ready() ?

Question

I'm trying to convert all my old javascripts to jquery but I'm a bit confused how can I convert my click event with attr. The old javascript looks something like:

function MyFunction(string1, string2){
    doSomething(string1);
    doSomethingElse(string2);
}

And then I call it with

<a href="javascript:MyFunction('string 1','string 2');">CLICK HERE</a>

Can I do this with the jquery click()? Or how can I send the two strings with an event in jquery? I need to define the two strings in the link like I'm doing it now because the strings will vary.

Edit: I have removed my jquery-code-try as it only confused :)

Answer 1

$('#myLink').click(function() {
    doSomething('string 1');
    doSomethingElse('string 2');
});

Is that good enough for you?

Answer 2

Naeem's solution is good, and it's hard to tell the conditions of that link. Is it dynamically created? If so you can set attributes, like

<div id="myLink" a="string1" b="string2">CLICK HERE</div>

and then

$('#myLink').click(function() {
    doSomething( $(this).attr('a') );
    doSomethingElse( $(this).attr('b') );
});

Answer 3

If the Naeem's answer is not good enough:

$('#myLink').click(function() {
    MyFunction('string 1', 'string 2');
});

Though I would like to say his accomplishes the same thing without calling MyFunction.

EDIT:

After reading your comments I think this is maybe more of what you're looking for:

$('.myLink').click(function(){
    var $this = $(this);
    MyFunction($this.attr('alt'), $this.attr('title'));
});

This will look for all element with a class of "myLink". When any of elements is clicked, MyFunction() will be called with the element's "alt" attribute as the first parameter and the element's "title" attribute as the second element.

You could of course call MyFunction() with any any of the attributes of the element you wanted by changing the parameter given to $this.attr().

Answer 4

There is the optional data object which is available through the event.data property on the event object passed to event handlers (I've laid the code out so it all fits without needing to scroll)

$('#myLink').bind("click", 
                  {string1:"string1", string2:"string2"}, 
                  function(event) {

                      doSomething(event.data.string1);
                      doSomethingElse(event.data.string2); 
});

<div id="myLink">CLICK HERE</div>

I'm not quite sure if this really solves the underlying problem though. Will each <a> element have different string1 and string2 values? If so, you might think about putting them in $.cache using jQuery's $.data() function, or perhaps store them in an object (which I guess is kind of the same as what you get with the cache).

Answer 5

Thanks everybody for your help. I ended up using kb's solution.

<a href="#" class="myLink" title="string1" rel="string2">click me</a>

And

$('.myLink').click(function(){
   var $this = $(this);
   alert('Output: ' + $this.attr('title') + " and " + $this.attr('rel'));
});