Question

我为自己的网站使用了自动完成插件。它对我来说很好。但是现在我正在使用Ajax同时因此在使用AJax添加新HTML时我的脚本失败了。我发布了stackoverflow并得到了关于使用Jquery 1.7.2的.on的答案所以我试图将我的代码绑定到.on

我的代码是

$(document).ready(function(){
    $(function(){
        $(document).on("click.autocomplete","#artist_id",function(e){
            $(this).autocomplete({
                source : '<?php echo HTTP_PATH . '/artists/getArtistList'; ?>',
                multiple: true,
                mustMatch: true,
                matchContains: true,
                scroll: true,
                minChars: 0,
                autoFill: true,
                dataType: "json",
                parse: function(data) {
                    return $.map(data, function(item) {
                        return { data: item, value: item.label, result: item.label};
                    });
                },
                formatItem: function(item) {
                    return item.label;
                },
                formatResult: function(item) {
                    return item.id;
                },
                formatMatch: function(item) {
                    return item.label;
                }
            });
        });
    });
 });

运作良好的代码......

    $("#artist_id").focus().autocomplete( '<?php //echo HTTP_PATH . '/artists/getArtistList'; ?>', {
        multiple: true,
        mustMatch: true,
        matchContains: true,
        scroll: true,
        minChars: 0,
        autoFill: true,
        dataType: "json",
        parse: function(data) {
            return $.map(data, function(item) {
                return { data: item, value: item.label, result: item.label};
            });
        },
        formatItem: function(item) {
            return item.label;
        },
        formatResult: function(item) {
            return item.id;
        },
        formatMatch: function(item) {
            return item.label;
        }
    });

问题既不是它发送响应也不是它给我带错误的脚本。我尝试使用Firebug进行检查。

Answer 1

你的问题就在这一行：

$(document).on("click.autocomplete","#artist_id",function(e){

你以前在焦点上'绑定'，现在你绑定'click.autocomplete'。将其更改为：

$(document).on("focus","#artist_id",function(e){

根据jQuery docs on .on()，第二个参数是您要绑定的事件，而不是选择器。

Answer 2

少数事情：

这是多余的

$(document).ready(function(){
    $(function(){...

只使用其中一种。

$(document).ready(function(){...

其次，click.autocomplete绑定到具有autocomplete命名空间的任何点击事件。我认为您打算将事件绑定到任何具有类autocomplete的文本输入。

$(document).on("click",".autocomplete",function(e){
    // prevent the default action
    e.preventDefault();
    // initialize autocomplete
    $(this).autocomplete({
        ...
    })
    // remove class to prevent reinitializing autocomplete:
    .removeClass('autocomplete')
    // trigger the focus event to start the autocomplete
    .focus();
});

$(document).ready因为document已准备就绪，所以不需要{{1}}。

与Jquery的.on事件绑定

2 个答案: