自动填充无法正确加载 - 必须重新加载页面才能使其正常工作

Question

我遇到了这段代码的问题。当我最初加载我的页面时，代码不起作用。但是，如果我点击我网站上的另一个页面，然后再次单击调用此代码的页面，它将完美地运行。我已经尝试删除jquery UI脚本，但这不起作用。问题在于以$ event_name开头的代码并调用自动完成jquery例程。如果我将该代码注释掉，则页面会正确加载。如果我重新放入代码，我必须在加载此页面之前先加载另一页。

欢迎所有建议。谢谢格兰特

  <script type="text/javascript">
    $(document).ready(function(){
    $('#artist_create_event_desc').jqEasyCounter({
        'maxChars': 500,
        'maxCharsWarning': 1,
        'msgFontSize': '12px',
        'msgFontColor': '#000',
        'msgFontFamily': 'Verdana',
        'msgTextAlign': 'left',
        'msgWarningColor': '#F00',
        'msgAppendMethod': 'insertAfter'                
    });
});
    $event_name = $('#name');
    $event_address_container = $('#address-container');
    $event_id = $('#id');
    $event_name.autocomplete({
        minLength: 3,
        source: '../search_event.php',
        focus: function( event, ui ) {
            $event_name.val( ui.item.event_name );
            return false;
        },
        select: function( event, ui ) {
            $event_name.val( ui.item.event_name );
            $event_id.val( ui.item.event_id );
            $event_address_container.html( ui.item.event_desc );            

            return false;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.event_desc + "</a>" )
            .appendTo( ul );
    };

$('#searchme').on('click',function(e){
    e.preventDefault();
    jQuery('#city').val('');
    jQuery('#state').val('');
    jQuery('#location').val('');
    jQuery('#hiddenstate').val('');
    $('#aloader').show();
    var varzip = $('#zipcode').val();
    if (varzip == '') {
        $('#aloader').hide();
        alert('Please enter zipcode');
        return;
    }
    varzipReplaced = varzip.split(' ').join('+');
    $.ajax({
        url : 'location.php',
        data : 'zip='+encodeURIComponent(varzipReplaced),
        type : 'post',
        success : function(res) {
            $('#aloader').hide();
            var dataObj = $.parseJSON(res);
            if (dataObj.city == '' && dataObj.state == '' && dataObj.country == '') {
                $('#city').removeAttr("readonly");
                $('#state').removeAttr("readonly");
                $('#location').removeAttr("readonly");
                alert('No location found! Enter information manually');
                return;
            } else {
                $('.showZipErr').empty().append('<strong>*Zipcode*:</strong>');
                if (dataObj.city != '') {
                    $('.showCityErr').empty().append('<strong>*City*:</strong>');
                    $('#city').val(dataObj.city);
                } else {
                    $('#city').removeAttr("readonly");
                }
                if (dataObj.state != '') {
                    $('.showStateErr').empty().append('<strong>*State or Province*:</strong>');
                    $('#state').val(dataObj.state);
                } else {
                    $('#state').removeAttr("readonly");
                }

                var stateWithShortName = dataObj.stateshort + "-" +dataObj.state
                if (dataObj.state != '') {
                    $('#hiddenstate').val(stateWithShortName);
                } else {
                    $('#state').removeAttr("readonly");
                }

                if (dataObj.country != '') {
                    $('.showCountryErr').empty().append('<strong>*Country Code*:</strong>');
                    $('#location').val(dataObj.country);
                } else {
                    $('#location').removeAttr("readonly");
                }
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Error fetching location');
        }
    });

    });
</script>