Question

Using ‘old school’ javascript you would put the ID as the parameter in an inline function call (onclick="my_function(28)" or similar), with the ID provided by your server-side code.

Using ‘new school’ javascript, the function call is abstracted from the element, so how to pass the ID?

My guess is:

<a id="28" class="do-something" href="#">Do something</a>

$('a.do-something).click(function(event){

  element_id = $(this).attr('id');

  $.get('something.php', { id: element_id });

  return false;

});

Is there a convention or best practice you use / have seen?

[Update: added return false; ]

Answer 1

Usually for something like this I’ll just use the HREF to store the URL the jQuery handler should use:

<a class="do-something" href="something.php?id=28">Do something</a>

$('a.do-something).click(function(event){
  $.get($(this).attr('href'));
  return false;
});

This way the ID can still be around incase you need it for CSS. Plus if you get to the point of needing multiple parameters to send into the php function you don’t have to worry, it’s all part of the URL like it normally would be.

The return false prevents the browser from actually going to the link when it’s clicked on.