javascript - 使用 .live() 到 .autocomplete() 不会在 domchange 上触发

Question

我有这个自动完成功能

    $( "#tags" )
                // don't navigate away from the field on tab when selecting an item
                .bind( "keydown", function( event ) {
                    if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
                        event.preventDefault();
                    }
                })
                .autocomplete({
                    minLength: 2,
                    /*source: function( request, response ) {
                        // delegate back to autocomplete, but extract the last term
                        response( $.ui.autocomplete.filter(
                            availableTags, extractLast( request.term ) ) );
                    },*/
                    source: function( request, response ) {
                        $.getJSON( "json.php", {
                            term: extractLast( request.term )
                        }, response );
                    }
                    

/*all the options omitted*/
            });

这在 dom.ready 上效果很好，但是如果我动态删除并再次添加相同的表单，则自动建议功能将不会启用，所以我考虑使用 .live() 但它给了我相同的行为

 $( "#tags" )
                // don't navigate away from the field on tab when selecting an item
                .live( "keydown", function( event ) {
                    if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
                        event.preventDefault();
                    }
                })
                .autocomplete({
                    minLength: 2,
                    /*source: function( request, response ) {
                        // delegate back to autocomplete, but extract the last term
                        response( $.ui.autocomplete.filter(
                            availableTags, extractLast( request.term ) ) );
                    },*/
                    source: function( request, response ) {
                        $.getJSON( "json.php", {
                            term: extractLast( request.term )
                        }, response );
                    }
                    

/*all the options omitted*/
            });

.live() 不应该处理 dom 更改吗？

Answer 1

是的，您应该使用on(尽管live仍然可用)。 您可能希望在第一次击键时初始化自动完成功能:

$( document ).on( "keydown", "#tags", function( event ) {
    if ( $.type( $( this ).data( "autocomplete" ) ) == "undefined" ) {
        $( this ).autocomplete({
            minLength: 2,
            source: function( request, response ) {
                $.getJSON( "json.php", {
                    term: extractLast( request.term )
                }, response );
            }
        });
    }
    if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
            event.preventDefault();
    }
});

注意:最好使用最接近的“#tags”父级，而不是 $( document ).on ，它始终位于 DOM 中(永远不会被删除或重新加载)。 document 是所有内容的父级，并且始终存在，这就是它始终适用于 on 的原因。但如果可能的话，我们应该避免在文档中附加所有事件处理程序。

<小时/>

另外，其他用户的回答是正确的。当你这样做时:

$( '#tags' ).live( ... ).autocomplete( ... );

这与:

相同

$( '#tags' ).live( ... );
$( '#tags' ).autocomplete( ... );

这意味着:live 调用未附加到autocomplete 调用。

<小时/>

此外，正如其他用户回答的那样，初始化 autocomplete 的更好位置是在 AJAX 成功事件处理程序中，即在“#tags”元素之后，而不是上面的解决方案包含在 DOM 中:

$('div#something').load('new_content_from_server', function() {
    // the tags arrived! let's initialize the autocomplete
    $( '#tags' ).autocomplete( ... );
});

我希望这会有所帮助。