javascript - 从外部触发 jquery 插件中的事件

Question

我使用 jquery easy autocomplete具有内部事件“onSelectItemEvent”的插件。

现在我想从外部调用此事件(因为它绑定(bind)到我已经编写的扩展函数)。

我准备了一个 fiddle ，但是用它触发插件事件不起作用:)

$("#example-ac").easyAutocomplete(this.list.onSelectItemEvent());

$(document).ready(function() {
  var options_ac = {
    url: "https://fcgi.msk.link/model-json.pl?site=test",
    getValue: function(element) {
      //console.log(element);
      return element;
    },
    list: {
      match: {
        enabled: true
      },
      sort: {
        enabled: true
      },
      maxNumberOfElements: 8,
      onSelectItemEvent: function() {
        $("output").html($("#example-ac").val())
      }
    },
    theme: "square"
  };
  $("#example-ac").easyAutocomplete(options_ac);

  $("#trigga").click(function() {
    $("#example-ac").easyAutocomplete(this.list.onSelectItemEvent());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>

<input id="example-ac" />
<br>
<input id="example-ac" /><br/>
<output></output>
<button id="trigga">
trigger
</button>

http://jsfiddle.net/Lgetus29/

感谢您的提示是否可行，或者是否必须以其他方式完成解决方案。 codepen 示例只是小代码，而这个内部函数的真正编码是大量的，所以我想重用。也许我最好在插件外部创建一个函数，然后在“onSelectItemEvent()”中重用这个函数，这甚至可能吗？

谢谢!!

Answer 1

为什么不像这样使用它

$("#trigga").click(function() {
    options_ac.list.onSelectItemEvent()
});

所以你的最终代码看起来像

$(document).ready(function() {
    var options_ac = {
        url: "https://fcgi.msk.link/model-json.pl?site=test",
        getValue: function(element) {
        //console.log(element);
            return element;
        },
        list: {
            match: {
                enabled: true
            },
            sort: {
                enabled: true
            },
            maxNumberOfElements: 8,
            onSelectItemEvent: function() {
                $("output").html($("#example-ac").val())
            }
        },
        theme: "square"
    };
    $("#example-ac").easyAutocomplete(options_ac);

    $("#trigga").click(function() {
        options_ac.list.onSelectItemEvent();
    });
});