I've got an <input> tag inside a <table> with a custom attribute.
When I try to create a function to retrieve that attribute it doesn't work.
Any ideas?
<table>
<tr>
<td>
<input row="ab01" id="ab01_01">
</td>
</tr>
</table>
function retrieve_row(){
alert($(this).attr('row'));
}
The result is undefined. Why?
A couple things:
Your this isn't scoped right, just target your element directly:
function retrieve_row(){
alert($('#ab01_01').attr('row'));
}
Also, don't make custom HTML attributes like you are. Have no fear, though, you can use the HTML5 data- attribute to achieve the same end:
<input row="ab01" id="ab01_01"> //INVALID
<input data-row="ab01" id="ab01_01"> //VALID
function retrieve_row(){
alert($('#ab01_01').attr('data-row')); //The un-hip way
alert($('#ab01_01').data('row')); //Like the cool kids are doing
}
From jQuery's pappy: http://ejohn.org/blog/html-5-data-attributes/
Based on the OP's comments, I believe he is looking for this:
$("table").on( "click", "input", function() {
alert($(this).data('row'));
});
You might want to add a class or ID to your table so that this function isn't overly broad.
data-row value?
$(this)? try$("#ab01_01").attr('row');