javascript - On click function does not respond to a wrapped span tag -
i trying toggle between input field , text field. if on span tag, works fine. however, if span tag wrapped table data, not respond.
any appreciated.
ui
<div> <table class="students"> <thead> <tr> <th>name</th> </tr> </thead> <tbody> <tr> <td> <span id ="namespan">elvis</span> </td> </tr> </tbody> </table> </div>
js
$(document).ready(function(){ var focusinname = ''; var focusoutname = ''; $(function () { $(document).on("click", ".span", function () { focusinname = $(this).html(); var input = $('<input />', { 'type': 'text', 'name': 'aname', 'value': $(this).html(), 'class': 'input' }); $(this).parent().append(input); $(this).remove(); input.focus(); alert(focusinname); }); $(document).on('blur', ".input", function () { focusoutname = $(this).val(); var span = $( '<span />', { 'class': 'span', 'html': $(this).val() }); $(this).parent().append(span); $(this).remove(); alert(focusoutname); }); }); });
fiddle :here
since using class selector (".class"), need add class span
span element
<span class='span' id ="namespan">elvis</span>
Comments
Post a Comment