将工作的jQuery自动完成代码移动到中心文件会破坏代码

在我的测试页面上，我一直在开发和测试jQuery的完整功能（只需键入“ho”即可）

当我让它工作时，我将代码复制到我导入的一个中心JS文件中。然后它停止工作，您可以看到它在第三个表单字段中停止工作：

以下是我复制的代码：

function log( message ) 
{
    $( "<div/>" ).text( message ).prependTo( "#log" );
    $( "#log" ).scrollTop( 0 );
}

$( "#category_field" ).autocomplete({
    source: "/problems/get_categories_ajax.php",
    minLength: 2,
    select: function( event, ui ) 
    {
            log( ui.item ?
                ui.item.value :
                    "Nothing selected, input was " + this.value );
    }
});

$('#add_category').click(function() 
{
        alert ("in add category");
        // Now have to get value of the text entry area
        var category = $("#category_field").val(); // Works

        var text_area = $("#log").val();        
        alert ("text_area: " + text_area);

        // Should append to value of textarea what is in the category
        if ( text_area )
        {
            alert ("text area NOT EMPTY: " + text_area + " and category: " + category );
            text_area = text_area + " , " + category;    
        }
        else
        {
            //alert ("text area EMPTY: " + text_area + " and category: " + category );
            text_area = category;           
        }    

        // Now replace old text_area with new one
        $("#log").val(text_area); 

        // Now reset the text field
        $("#category_field").val("");
});

$('#category_form').bind('submit',function()
{
        // Get the variables
        var problem_id = 1;
        //var categories = $("#log").text();    
        var categories = $("#log").val();

        var dataString = 'problem_id='+ problem_id + '&categories=' + categories;
        alert ("Data string: " + dataString);

        // Now check if the problem_id or solution are empty
        if( !categories )
        {
            $('#categories_success').fadeIn(200).hide();
            $('#categories_error').fadeOut(200).show();         
        }   
        else
        {
            // Now check if the user is logged in
            $.ajax({
                    type: "POST",
                    url: "/auth/check_login.php",
                    dataType: "json",
                    success: function(data)
                    {
                        // If we are logged in, now can make a call to add the categories
                        $.ajax({
                            type: "POST",
                            url: "/problems/add_categories_ajax.php",
                            data: dataString ,
                            success: function(data)
                            {
                                $('#categories_success').fadeIn(200).show();
                                $('#categories_error').fadeOut(200).hide();     

                                $("#log").val("");
                            },
                            error: function(data)
                            {
                                alert ("error");
                                //if ( data.status == 200 )
                                //{
                                //       $('.add_message_success').fadeIn(200).show();
                                //       $('.add_message_error').fadeOut(200).hide();   

                                //       $('#comments').html(data);                     
                            //  }
                                //alert ("could not add attempted solution to the database");
                            }
                        });                     

                    } ,
                    error: function(data)   
                    {
                        // Error case for checking if user is not logged in
                        $("#loginpopup").dialog();

                        return false;
                    }   // End of error
            }); // End of the first AJAX call.                  
        }  // End of else in this AJAX jQuery call.     

        return false;
    }); 

功能日志（消息）
{
$（“”）.text（message）.prependTo（“#log”）；
$（“#log”）.scrollTop（0）；
}
$（“#类别字段”）。自动完成({
来源：“/problems/get_categories_ajax.php”，
最小长度：2，
选择：功能（事件、用户界面）
{
日志（ui.item？
ui.item.value：
“未选择任何内容，输入为”+this.value）；
}
});
$（“#添加_类别”）。单击（函数（）
{
警报（“添加类别中”）；
//现在必须获取文本输入区域的值
var category=$（“#category_字段”）.val（）；//有效
var text_area=$（“#log”）.val（）；
警报（“文本区域：+文本区域”）；
//应将类别中的内容附加到textarea的值
如果（文本区域）
{
警报（“文本区域不为空：+文本区域+”和类别：+类别）；
文本区域=文本区域+“，”+类别；
}
其他的
{
//警报（“文本区域为空：+文本区域+”和类别：+类别）；
文本区域=类别；
}    
//现在将旧的文本区域替换为新的文本区域
$（“#log”）.val（文本区域）；
//现在重置文本字段
$（“#类别字段”）.val（“”）；
});
$（'#category_form'）.bind（'submit'，function（）
{
//获取变量
var问题_id=1；
//变量类别=$（“#日志”）.text（）；
var categories=$（“#log”）.val（）；
var dataString='problem_id='+problem_id+'&categories='+categories；
警报（“数据字符串：“+dataString”）；
//现在检查问题id或解决方案是否为空
如果（！类别）
{
$（'#categories_success'）.fadeIn（200.hide（）；
$（'#categories_error'）.fadeOut（200.show（）；
}   
其他的
{
//现在检查用户是否已登录
$.ajax({
类型：“POST”，
url:“/auth/check\u login.php”，
数据类型：“json”，
成功：功能（数据）
{
//如果我们登录，现在可以打电话添加类别
$.ajax({
类型：“POST”，
url:“/problems/add_categories_ajax.php”，
数据：dataString，
成功：功能（数据）
{
$（'#categories_success'）.fadeIn（200.show（）；
$（'#categories_error'）.fadeOut（200.hide（）；
$（“#log”）.val（“”）；
},
错误：函数（数据）
{
警报（“错误”）；
//如果（data.status==200）
//{
//$（'.add_message_success'）.fadeIn（200.show（）；
//$（'.add_message_error'）.fadeOut（200.hide（）；
//$（'#comments'）.html（数据）；
//  }
//警报（“无法将尝试的解决方案添加到数据库”）；
}
});                     
} ,
错误：函数（数据）
{
//检查用户是否未登录的错误案例
$（“#loginpopup”）.dialog（）；
返回false；
}//错误结束
})；//第一个AJAX调用结束。
}//结束此AJAX jQuery调用中的else。
返回false；
}); 

---

知道我复制代码时为什么会出错吗？JavaScript控制台显示TinyMCE库中的某个css文件有一个错误，它找不到，但除此之外，一切都正常。

发生的情况是，加载JS时丢失的css文件似乎抛出了一个错误。TinyMCE可能需要此文件才能正常工作，因此可能会抛出错误。由于错误没有得到处理，因此JS的其余部分不会执行，因此永远不会挂接自动完成

您可以通过在浏览器的控制台中手动运行自动完成代码来确认这一点

$( "#category_field" ).autocomplete({
    source: "/problems/get_categories_ajax.php",
    minLength: 2,
    select: function( event, ui ) 
    {alert ("1");
            log( ui.item ?
                ui.item.value :
                    "Nothing selected, input was " + this.value );
    }
});

在控制台中运行上述操作将激活自动完成

---

您可以通过确保CSS文件存在，或者通过使用try/catch和recovery包围错误调用来修复错误

谢谢。我可以用try/catch块包围库导入调用吗？这是典型的吗？另外，在测试页面中，关于css的错误消息不在那里，如果我将代码从那里交换到problemio.js文件，这也会破坏该页面，即使那里没有TinyMCE库。嗯，我只是假设是TinyMCE抛出了错误，因为你提到了它。看起来情况可能不是这样。您是否尝试过将jquery UI调用包装到文档中。ready（）？不太可能。我是jQuery新手，所以我不确定如何复制文档。准备好将代码放入库文件中。最初，我确实在document.ready包装中包含了代码。请确保所有jquery UI和任何事件绑定调用都包装在document.ready（）中。或者将脚本移动到页面底部，以确保在加载脚本之前加载页面