我有一些附带javascript控件的小部件。
如果加载小部件管理页面时小部件存在,则控件工作正常。
当我添加一个新的小部件时,它们不能正常工作,我得到了标记,但没有javascript事件生效。
如果我保存新的小部件,当表单重新加载时,控件将正确创建,现在可以工作了。
刷新页面也可以解决此问题,但仅适用于现有小部件。新的widget仍然存在这个问题。
具体而言,我在以下几点上对选择输入运行selectize:
我已经验证了我的代码在每个事件上都按预期运行,但结果不符合预期。
下面是一个测试插件,演示了该问题:
https://gist.github.com/Tarendai/8466299
您将看到,我有一个计数器,它随着找到的每个可以转换的select元素而增加。
备注:
加载小部件页面时,我可以在JS控制台中看到计数器按预期增加。当我添加一个新的小部件时,代码会运行,但是,它找不到任何可以运行的选择元素,如find所示。长度为0。不应该是这种情况,因为该类型的每个新小部件都应该有一个select元素,select元素有一个类来标识它们,一旦应用selectize库,该类就会被删除,以防止在现有小部件上重复和重新处理在使用selectize之前,我使用了Select2,它也有同样的问题。我希望新的小部件有一个标准的select输入。他们没有。我不知道为什么会出现这种情况,那么我如何让selectize控件工作,而不告诉用户在进行更改之前刷新/单击save?
SO网友:chifliiiii
正如@aaron holbrook评论的那样,一种更干净的方法将是:
jQuery(document).on(\'widget-updated widget-added\', function(){
// your code to run
});
在许多情况下,您还需要在页面加载以及小部件更新时运行JS。你可以这样做。
function handle_widget_loading(){
// your code to run
}
jQuery(document).ready( handle_widget_loading );
jQuery(document).on(\'widget-updated widget-added\', handle_widget_loading );
只是粘贴在这里作为参考,因为答案更容易找到评论