javascript - ("change"上的 Select2 事件返回空数据参数

Question

我正在尝试为 Summernote v0.8.9 创建一个插件，并且我正在使用 select2用于创建下拉列表的库。

在下面找到我的代码:

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory(require('jquery'));
  } else {
    factory(window.jQuery);
  }
}(function($) {

  $.extend($.summernote.plugins, {
    'insertData': function(context) {
      var self = this;

      var ui = $.summernote.ui;
      var $editor = context.layoutInfo.editor;
      var options = context.options;

      context.memo('button.insertData', function() {
        return ui.button({
          contents: '<i class="fa fa-database">',
          tooltip: 'Create InsertData',
          click: context.createInvokeHandler('insertData.showDialog')
        }).render();
      });

      self.initialize = function() {
        var $container = options.dialogsInBody ? $(document.body) : $editor;

        var body = '<div class="form-group">' +
          '<label>Select</label>' +
          '<select id="selectBox"></select>' +
          '</div>' +
          '<label>InsertData</label>' +
          '<input id="input-insertData" class="form-control" type="text" placeholder="Insert your insertData" />'
        var footer = '<button href="#" class="btn btn-primary ext-insertData-btn">OK</button>';

        self.$dialog = ui.dialog({
          title: 'Create InsertData',
          fade: options.dialogsFade,
          body: body,
          footer: footer
        }).render().appendTo($container);
        self.selectItem()
        self.fillSelectField();
      };

      self.destroy = function() {
        self.$dialog.remove();
        self.$dialog = null;
      };

      self.showDialog = function() {
        self
          .openDialog()
          .then(function(data) {
            ui.hideDialog(self.$dialog);
            context.invoke('editor.restoreRange');
            self.insertToEditor(data);
            console.log("dialog returned: ", data)
            // ...
          })
          .fail(function() {
            context.invoke('editor.restoreRange');
          });
      };

      self.openDialog = function() {
        return $.Deferred(function(deferred) {
          var $dialogBtn = self.$dialog.find('.ext-insertData-btn');
          var $elemInput = self.$dialog.find('#input-element')[0];
          var $insertDataInput = self.$dialog.find('#input-insertData')[0];

          var selectedText = $.selection()
          $('#input-element').val(selectedText);
          context.invoke('editor.saveRange');
          console.log("show dialog: " + selectedText)

          ui.onDialogShown(self.$dialog, function() {
            context.triggerEvent('dialog.shown');

            $dialogBtn
              .click(function(event) {
                event.preventDefault();

                deferred.resolve({
                  element: $elemInput.value,
                  insertData: $insertDataInput.value
                });
              });
          });

          ui.onDialogHidden(self.$dialog, function() {
            $dialogBtn.off('click');

            if (deferred.state() === 'pending') {
              deferred.reject();
            }
          });

          ui.showDialog(self.$dialog);
        });
      };

      this.selectItem = function() {
        $('#selectBox').on("change", function(e) {
          console.log("event")
          console.log(e)
          var data = e.params.data;
          console.log(data);

          $('#input-insertData').text("test")
        });
      }

      this.fillSelectField = function() {
        var data = []
        var text = $('.note-editable').html()
        data = text.match(/{{\s*\$\w+\s*}}/g)
        data.push("null"); // add empty value to array
        data = data.filter((v, i, a) => a.indexOf(v) === i); // only unique values

        $("#selectBox").select2({
          width: 'resolve',
          data: data
        })
      }
    }
  });
}));

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-pdapHxIh7EYuwy6K7iE41uXVxGCXY0sAjBzaElYGJUrzwodck3Lx6IE2lA0rFREo" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/summernote.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/summernote.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selection/1.0.1/jquery.selection.js"></script>

<div class="container">
  <div class="summernote">
    <p>Hello World!</p>
    {{ $slot }} {{$slot}} {{$category}} {{$s }} {{ $slot}}
  </div>
</div>

如您所见，当我按下按钮并选择一个元素时，我只返回一个空事件 e。

在上面的示例中，我从下拉列表中进行选择，除了在我的函数 this.selectItem 中返回已删除事件的数据参数。我想在下一步中将该值添加到我的输入字段中。

为什么事件 e 的数据字段为空？ 我做错了什么？

Answer 1

您需要initial select2才能开始监听事件并存储数据。

$('#selectBox').select2();  //initialized
$('#selectBox').on("change", function(e) {
      console.log("event")
      console.log(e)
      var data = e.params.data;
      console.log(data);

      $('#input-insertData').text("test")
    });