jQuery live change problem

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');
    });
});

---

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.