jQuery live change problem

Question

When I click an element from list, jQuery get class from clicked element and write it in input field. Then value from input need to be written in div#content without any action.

HTML:

<ul>
    <li class="NewYork">New York</li>
    <li class="Paris">Paris</li>
    <li class="Moscow">Moscow</li>
</ul>

<input type="text" id="city" value="" />

<div id="content"></div>

jQuery:

$(document).ready(function() {
    $('ul li').live('click', function() {
        var select_value = $(this).attr('class');
        $('input#city').val(select_value);
        return false;
    });

    $('input#city').live('change', function() {
        var content = $(this).val();
        $('#content').text(content+' is beautiful city');
    });
});

Answer 1

Change this:

$('input#city').val(select_value);

To this:

$('input#city').val(select_value).change();

The change event is fired when the value changes, usually on textbox blur (clicking elsewhere). You can however, trigger it when needed with .change() or .trigger('change'), which is what the above code does.