Alexis Alexis - 19 days ago 7
jQuery Question

Converting span to input upon click

I have converting spans to input upon clicking and when click outside it becomes span again. But it just converts for once and then doesn't happen again

Here is the code.

$(function () {
$(document).on('click', 'span.loadNum', function () {
var input = $('<input />', {
'type': 'text',
'name': 'unique',
'value': $(this).html()
});
$(this).parent().append(input);
$(this).remove();
input.focus();
});

$(document).on('blur', 'input', function () {
$(this).parent().append($('<span />').html($(this).val()));
$(this).remove();
});
});


And spans

<span class="loadNum">Hasha</span>
<span class="loadNum">dbhfb</span>


Also can anyone tell how to achieve this that when I press enter on converted input tag it should submit an ajax call.

Answer

When you re-add the span, it doesn't have a class. So the span.loadNum selector won't identify it. Add the class:

$(this).parent().append($('<span />').addClass('loadNum').html($(this).val()));
Comments