javascript - 如何调用 jquery 插件

Question

我有一个 jquery autosuggest plugin

这就是插件在输入字段上的实现方式

var options = {
        script:"ajax/college.php?json=true&",
        varname:"college",
        json:true,
        callback: function (obj) { document.getElementById('college').value = obj.id; }
    };

    var as_json = new AutoSuggest('college', options);

这是将输入字段附加到页面的方式

 $('input[type=radio][name=career]').change(function() {
   if (this.value == '1') {
      $(".tp").html('<input type="text" class="form-control input-lg" name="college" id="college" placeholder="College name">');
     }
  });

但是附加插件之后不适用于该输入，如果我只是非动态地写入输入字段，那么它就可以工作

<input type="text" class="form-control input-lg" name="college"
id="college" placeholder="College name">

Answer 1

该插件不起作用，因为在初始化时，DOM 中不存在 id 为 college 的 input 元素。

因此，仅在将输入插入页面后，您才需要初始化 AutoSuggest 脚本。

尝试以下代码:

$('input[name=career]').change(function() {
    if (this.value == '1') {

        // check if autosuggest has not already been initialized
        if (typeof as_json === 'undefined') {

           // input element is inserted into the page
           $(".tp").html('<input type="text" class="form-control input-lg" name="college" id="college" placeholder="College name">');

           // initialize autosuggest here
           var as_json = new bsn.AutoSuggest('college', options);
       }

    }

});

在这里摆弄:https://jsfiddle.net/Lhdcgg3o/ .