jQuery keyup不能通过javascript检测到内容更改

Question

I have this code which puts the content of my input fields into a preview div area:

JS

function fieldPreview() {
$('.input').on('keyup', function() {
    $('#' + $(this).data('id')).html(this.value);
});
}

HTML

<input class="input" type="text" name="title" placeholder="Job Title" data-id="title">
<div id="title"></div>

My issue comes from the fact that two of my input fields are a little more complicated. One field uses google map autosuggest. When I click on the autosuggestion link it updates the text field but doesn't update the preview in the div until I actually modify the input manually by adding or removing another letter.

Is there a better way in jquery to monitor changes in an input field? This will allow me to put the contents of the field into the div even if it has been put there by javascript rather than a keyup.

Here is an example of jquery clearing the contents of the input field but it not being reflected in the DIV: http://jsfiddle.net/xDA9p/5/

Answer 1

Use the change paste keyup input events.

$('.input').on('change paste keyup input', function() {
  $('#' + $(this).data('id')).html(this.value);
});