通过 Ajax 加载的 jQuery 选择元素

Question

以下代码运行一个简单的自动建议任务，它本身运行良好。问题是当通过 AJAX 将“ausu-suggest”类的 div 带到页面时，它不会运行。

div 内部是一个表单域。当您开始在表单域中输入内容时，自动建议就会启动。

我知道我可能应该使用 live() 函数，但我不确定语法，因为这与特定事件无关。即，下面的函数甚至不需要 change() 或 onKeyUp() 即可运行。

$.fn.autosugguest({
             className: 'ausu-suggest',
             methodType: 'POST',
             dataFile: "<?=site_url('survey/search_city')?>",
             minChars: 3,   
             rtnIDs: true,
        });

编辑：实际的插件代码在这里http://discussion.oslund.ca/2011/01/a-simple-jquery-ajax-autosuggest-plugin/

Answer 1

JavaScript 代码是在某个时刻应用的。它只会应用于当前页面上的内容，并且不会因为 DOM 更改而在以后自动重新运行。你对此负责。

在您的 AJAX 成功函数中，您只需在新内容加载到 DOM 后重新应用自动提示插件即可。

（作为旁注，jQuery 有一个 live 函数，可用于在新元素在 DOM 中弹出时自动将事件处理程序应用于新元素，但 jQuery 通过将处理程序附加到祖先元素来检查用于 DOM 更改，然后重新加载事件处理程序。技术上不是自动的。）

编辑：（示例）

$.fn.autosugguest({
         className: 'ausu-suggest',
         methodType: 'POST',
         dataFile: "<?=site_url('survey/search_city')?>",
         minChars: 3,   
         rtnIDs: true,
    });

$.ajax({
    url: 'http://domain.com/ajax',
    success: function (data) {
        // Write new input to DOM

        $.fn.autosugguest({
            className: 'ausu-suggest',
            methodType: 'POST',
            dataFile: "<?=site_url('survey/search_city')?>",
            minChars: 3,   
            rtnIDs: true,
        });
    }
);