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

我使用具有内部事件“onSelectItemEvent”的 jquery 简单自动完成插件。


现在我想从外部调用这个事件(因为它绑定到我已经写过的一个广泛的函数)。


我准备了一个小提琴,但是用它触发插件事件不起作用:)


$("#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()”中重用这个函数,这可能吗?


心有法竹
浏览 153回答 1
1回答

白猪掌柜的

为什么不像这样使用它$("#trigga").click(function() {&nbsp; &nbsp; options_ac.list.onSelectItemEvent()});所以你的最终代码看起来像$(document).ready(function() {&nbsp; &nbsp; var options_ac = {&nbsp; &nbsp; &nbsp; &nbsp; url: "https://fcgi.msk.link/model-json.pl?site=test",&nbsp; &nbsp; &nbsp; &nbsp; getValue: function(element) {&nbsp; &nbsp; &nbsp; &nbsp; //console.log(element);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return element;&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; list: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; match: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enabled: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sort: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enabled: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxNumberOfElements: 8,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onSelectItemEvent: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("output").html($("#example-ac").val())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; theme: "square"&nbsp; &nbsp; };&nbsp; &nbsp; $("#example-ac").easyAutocomplete(options_ac);&nbsp; &nbsp; $("#trigga").click(function() {&nbsp; &nbsp; &nbsp; &nbsp; options_ac.list.onSelectItemEvent();&nbsp; &nbsp; });});
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript