使用 Chosen 插件更改动态添加的选择事件

Question

我在我的网站上使用了 Chosen 插件，到目前为止它运行良好。但是，我处于动态添加 select 并在这些 select 上激活 Chosen 插件的情况。这些 Chosen select 的制作很好，但我不知道如何将点击事件绑定到元素。 Chosen 提供此 ( $("#form_field").chosen().change( … );) 作为对更改事件执行某些操作的方法，但是，这不起作用，因为我的 select 是动态添加的。

我试过 $('#el').change 和 $(document).on("change", "#el", function()) 也没有成功。

Answer 1

编辑

另一种使其工作的方法是将所有内容都填充到 init 函数中：

function init_new_content(){
  $("#form_field").chosen();
}
init_new_content();

然后每当您知道自己进行了更改时调用它（例如 ajax）

$.ajax({...},
            success: function( data){
                     init_new_content();
            },
...

Answer 2

原答案：来自 http://harvesthq.github.io/chosen/#change-update-events

"If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" 字段上的事件。Chosen 将根据更新的内容重新构建自身。"

$("#form_field").trigger("chosen:updated");

...因此只需在添加新元素后调用即可。

编辑：看完这篇 http://jsfiddle.net/amindunited/reh5p0tg/3/ 我可以看到问题是第二个 select 的 change() 侦听器在 select 添加到页面之前被附加。我已经更新了 fiddle 代码来工作：

http://jsfiddle.net/amindunited/reh5p0tg/4/

使用 Chosen 插件更改动态添加的选择事件

Change events on dynamically added selects using the Chosen plugin

javascript

jquery

jquery-chosen

编辑