动态 select2 不触发更改事件

Posted 2023-05-07

【中文标题】动态 select2 不触发更改事件

【英文标题】：Dynamic select2 not firing change event

【发布时间】：2013-04-10 08:02:14

【问题描述】：

我有一个表格，里面有几个选择。 我在这些选择上应用了 select2 jquery 插件，如下所示：

$("select.company_select, select.positions_select").select2();

选择工作正常，但我有这个代码来自动提交我的表单（我在表单标签上有自动提交类）。

var currentData;
    $('.autosubmit input, .autosubmit select, .autosubmit textarea').live('focus', function () 
        currentData = $(this).val();
    );

    $('.autosubmit input, .autosubmit select, .autosubmit textarea').live('change', function () 
        console.log('autosubmiting...');
        var $this = $(this);
        if (!currentData || currentData != $this.val()) 
            $($this.get(0).form).ajaxSubmit(function (response, status, xhr, $form) 
                currentData = "";
            );
        
    );

问题是，使用 select2，更改或焦点事件根本不会触发。如果我删除 select2，则事件会完美触发。

我做错了什么？

【参考方案1】：

Select2 只有 2 个事件，open 和 change (http://select2.github.io/select2/#events)，您只能向它们添加侦听器。 对于<select> 元素，您可以使用open 事件而不是focus。 请不要使用live() 方法，因为它已被弃用。请改用on()。

var currentData;
$(".autosubmit select").on("open", function() 
    currentData = $(this).val();
);
$(".autosubmit input").on("focus", function() 
    currentData = $(this).val();
);
$(".autosubmit input, .autosubmit select").on("change", function() 
    var $this = $(this);
    console.log('autosubmitting');
    if (!currentData || currentData != $this.val()) 
        $($this.get(0).form).ajaxSubmit(function (response, status, xhr, $form) 
            currentData = "";
        );
    
);

这里是Fiddle

【讨论】：

今晚遇到了同样的问题。这几乎对我有用。使用 jQuery 1.11.1 和 select2 的文本框版本我不得不使用更长的形式 $('.container').on('change', '#myselect2', function() ...

这个小提琴似乎不再起作用。尽管 select2.js 包含在外部资源中，但我在控制台中看到“未捕获的 TypeError：$(...).select2 不是函数”。可能是 jsfiddle 的问题？