Question

I am building app with php and jquery and it has many ajax loads and functionalities. What i would like to know is what is the most widely used and acceptable way of accessing dom elements with jquery and adding events to it using jquery and javascript and if there is any rule of thumb to follow for the following instances.(and how i do them now)

A query generates a list of records and each record has to be edited and deleted.

The generated records look like this

<a href="javascript:;" class="edit" id="edit-id-300" alt="edit-type-1">Record1</a>
<a href="javascript:;" class="delete" id="delete-id-300" alt="delete-type-1">Record1</a>
<a href="javascript:;" class="edit" id="edit-id-301" alt="edit-type-1">Record2</a>
<a href="javascript:;" class="delete" id="delete-id-301" alt="delete-type-1">Record2</a>
<a href="javascript:;" class="edit" id="edit-id-302" alt="edit-type-2">Record3</a>
<a href="javascript:;" class="delete" id="delete-id-302" alt="delete-type-2">Record3</a>

and my jquery code handle them would be

$(".edit").click(function() {
    var currentElementId = $(this).attr("id").replace("edit-id-","");
    $("#ajaxdiv").load("ajaxpage.php","editid="+currentElementId);
});

is this type of stuff ok? i mean is there any other way to do stuff like this especially when this gets more complicated like have to add 3 more identifiers to id and then exploding them and finding out each of the identifiers separately. Any guidelines here to follow.?

Answer 1

If you simply need to have something that can be cleaner, maybe you can consider bind the record into one
meaningful div, and use .live() to bind the event handlers
i.e.,

<div data-rec-id = '300'>
    ...
    <span class='link del' data-act='del'>Delete</span>
    <span class='link edit' data-act='edit'>Edit</span>
</div>
<div data-rec-id = '301'>
    ...
    <span class='link del' data-act='del'>Delete</span>
    <span class='link edit' data-act='edit'>Edit</span>
</div>

$('.edit').live('click', function(){
    var id = $(this).closest('[data-rec-id]').attr('data-rec-id');
    $("#ajaxdiv").load("ajaxpage.php","editid="+id);
});

or even generic:

$('.link').live('click', function(){
    var id = $(this).closest('[data-rec-id]').attr('data-rec-id');
    var action = $(this).attr('data-act');
    $("#ajaxdiv").load("ajaxpage.php","id="+id+"&act="+action);
});

Please don’t use something like:

<a href="javascript:;" ...

or I would suggest you use some robust framework. e.g., http://documentcloud.github.com/backbone/