undefined custom attribute Jquery

[publicGenome]

Hi There,
I'm having a jqgrid. With each row has a link for delete.

On click of the delete link, want the custom attribute I've set.
custom attribute is the primary key for row item.

On click of the URL, that particular item will be deleted from the database, and grid.

Example:

Code: Select all

<a href="#" del_val="9" onclick=delete_pipeline()>Delete</a> 

Code: Select all

$val=$(this).data('del_val'); //--data
alert($val); //undefined

$val=$(this).attr('del_val'); //--attr
alert($val); //undefined

I changed del_val in double quotes:

Code: Select all

<a href="#" "del_val"="5" onclick=delete_pipeline()>Delete</a> 

Then again I've undefined.

How do I fix it?
Thanks.

[requinix]

attr() should have worked.

However you aren't doing this the best way.
1. Use custom data attributes as defined in HTML 5. That mean the "data-" prefix.

Code: Select all

<a href="#" data-del-val="9">

2. Don't use onclick properties. Add the click handler using Javascript (ie, jQuery). You can do it really easily with

Code: Select all

$("a[data-del-val]").click(function() { // click handler for any <a> with a data-del-val attribute

(assuming the <a>s are not being dynamically generated or altered)
3. Get the del-val with .data().

Code: Select all

$val = $(this).data("del-val"); // will look for data-del-val

[publicGenome]

attr() should have worked.

However you aren't doing this the best way.
1. Use custom data attributes as defined in HTML 5. That mean the "data-" prefix.

Code: Select all

<a href="#" data-del-val="9">

2. Don't use onclick properties. Add the click handler using Javascript (ie, jQuery). You can do it really easily with

Code: Select all

$("a[data-del-val]").click(function() { // click handler for any <a> with a data-del-val attribute

(assuming the <a>s are not being dynamically generated or altered)
3. Get the del-val with .data().

Code: Select all

$val = $(this).data("del-val"); // will look for data-del-val

Hi requinix,
Thanks for your reply.

<a> are being added dynamically.
Is there another approach for dynamic ones?

[Celauran]

Why would you need another approach?

[publicGenome]

I think I got it working:

I added class to the dynamically added anchor tags:

Code: Select all

<a href="#" class="delete_pipe" data-del-val="12" >Delete</a> 

Code: Select all

$('body').on('click','a.delete_pipe',function(){
//do stuff here

var id=$(this).data("del-val"); //works great....

I found about this from:

http://stackoverflow.com/questions/1359 ... l-elements

I hope this would be fine?

[publicGenome]

Why would you need another approach?

Hi Cel,
Thanks for your reply.

Code: Select all

	$("a[data-del-val]").click(function(){

		alert("yahoo");
		});

This (above) method didn't work if HTML (anchor tags I'm adding) are created post page loading.

Thus, I looked for different method.

[requinix]

I hope this would be fine?

Yeah, that's the dynamic version: using .on with a parent element and a selector.

[publicGenome]

I hope this would be fine?

Yeah, that's the dynamic version: using .on with a parent element and a selector.

Thank you.