How to focus a dynamically generated "a" tag?
I am trying to pass the "a" tag after it has been created with an ajax call.
the code looks like this:
<form method="post" id="submitrow">
<table>
<tr>
<td>
<input name="quantity" id="id_quantity" />
</td>
<td>$
<input name="price" id="id_price" />
</td>
<td><span id="add_row"></span>
</td>
</tr>
</table>
</form>
<script>
jQuery("#id_quantity").change(function () {
jQuery('#add_row').html('<a onclick="document.forms[\'submitrow\'].submit();" id="sbmbtn">click me</a>');
jQuery('#sbmbtn').focus(); // I want to focus the new link, it does not works
alert(jQuery('#sbmbtn').is(':focus')); // it should be True!
jQuery('#sbmbtn').live("keyup", function (e) {
if (e.keyCode == 13) {
alert('whoot whoot!');
}
});
});
jQuery("#id_quantity").focus();
</script>
The DOM seems to update incorrectly after replacing the html. Maybe I need to replace the code in a different way?
I created a fiddle with a simplified version of my code that reproduces the problem.
Thanks in advance for any hint! :)
+3
source to share
1 answer
Just set the tabindex to tag a
jQuery("#id_quantity").change(function () {
jQuery('#add_row').html('<a tabindex="11" onclick="document.forms[\'submitrow\'].submit();" id="sbmbtn">click me</a>');
jQuery('#sbmbtn').focus(); // I want to focus the new link, it does not works
alert(jQuery('#sbmbtn').is(':focus')); // it should be True!
jQuery('#sbmbtn').live("keyup", function (e) {
if (e.keyCode == 13) {
alert('whoot whoot!');
}
});
});
jQuery("#id_quantity").focus();
+2
source to share