CODEWITHSUNDEEP
jquery
markzzz
markzzz

Reputation: 47945

jQuery - change/add an event on a link

I have this link :

<a href="#" onClick="addSide('1');return false">Link</a>

and I want that, when I click on a button (for example), the value of addSide in that link grow. Such as first click on the button I want to pass to the addSide function 1, second click addSide('2'), and so on...

So, is it possible change value of the addSide function, trought jQuery, by editing this and replace with somethings like addSide('another_value')?

EDIT I see is not so clear my question. So I give an example :)

This is the code I want to edit :

<div class="trackon" id="trackline">
    <span class="trackbotton1">
        <a class="lblueb" href="#" onClick="addSide('');return false">Add Side</a>
    </span>
</div>

I wrote this :

$('#trackline').find('.trackbotton1').children().attr('onclick', 'alert("example");return false');

but the function doesnt change...

Upvotes: 0

Views: 1417

Answers (3)

Majid Fouladpour
Majid Fouladpour

Reputation: 30252

Edit This is based on Jimmy Sawczuk's approach, and it works.

HTML

<a href="#" id="link" onclick="addSide();return false" rel="1">Link</a>
<button id="button">Button</button>
<div id="slide">1</div>

JS

$('#button').click(function() {
 var current_num = parseInt($('#link').attr('rel'));
 var new_num = current_num + 1;
 $('#link').attr('rel', new_num);
});

function addSide() {
    var n = parseInt($('#link').attr('rel'));
    $('#slide').text('slide number ' + n );
}

Old answer - This doesn't work.

<a href="#" id="link" onclick="addSide('1');return false">Link</a>
<button id="button">Button</button>

$('#button').click(function() {
 var current_func = $('#link').attr('onclick');
 var current_func_parts  = current_func.split("'");
 var current_num = parseInt(current_func_parts[1]);
 var new_num = current_num + 1;
 var new_func = "addSide('" + new_num + "');return false";
 $('#link').attr('onclick', new_func);
});

Upvotes: 0

Khez
Khez

Reputation: 10350

I'd recommend going for unobtrusive javascript.

HTML

<a href="#" class="canAddSide">Link</a>

JS

var curSide=1;
$('.canAddSide').click(function(event){
    addSide(curSide);
    curSide++;// increment or change the current side
    event.preventDefault();// return false;
});

Upvotes: 1

Jimmy Sawczuk
Jimmy Sawczuk

Reputation: 13614

I would use an event binding like so:

<a href="javascript: void(0);" class="side_adder" rel="1">Link</a>

And then, in your JS:

$('.side_adder').click(function(evt)
{
    addSide($(this).attr('rel'));
});

To change the value passed, simply change the rel using $(selector).attr({'rel': <whatever>});.

Upvotes: 4

Related Questions