Robert Rocha Robert Rocha - 5 months ago 25
Javascript Question

jQuery setting input value attribute using .html() not working

I want to be able to set the contents of the

value
attribute in the
input
element but have not been successful doing this.

HTML:

<div class='photo-info'>
Photo Name : <span class='photo-name'><?php echo $title; ?></span>
<span class='title-edit'><a href='#'>Edit</a></span>
</div>


jQuery:

// show editable area for title
$('.title-edit').on('click', function () {
var $titleElm = $(this).prev();
var text = $titleElm.text();
$titleElm.html("<input type='text'>").val('tom');
})


Result:

https://jsfiddle.net/fh7t9qwd/1/

Answer

Add find('input') after you update the HTML:

$titleElm.html("<input type='text'>").find('input').val('tom');

jsFiddle Demo