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> 

demo


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -