我有一个 SELECT 元素,其内容(选项元素)通过 AJAX 加载,并在准备就绪时以及更改不同的 SELECT 时插入。两个 SELECT 都有两个 OPTION 元素附加到通过 AJAX 加载的元素列表中:
<option disabled="disabled"></option>
<option value="edit">Edit…</option>
我已准备好以下 jQuery 事件绑定:
$('#theSelect').bind('change click', handleSelection);
The handleSelection()
然后,方法拦截正在选择的“编辑...”选项,将选择切换回之前选择的选项,并触发显示对话框的其他功能,该对话框允许用户编辑菜单中的选项。这在 Safari 和 Chrome 中效果很好,但有一种情况在 Chrome 中不起作用:如果没有通过 AJAX 加载的选项,因此只有禁用的和“编辑...”选项可见,它不会触发选择“编辑...”选项时发生的事件。这似乎是因为,在 Chrome 中,默认选择“编辑...”选项(因为它是第一个启用的选项;而 Safari 则选择禁用的选项,因为它是第一个选项)并且只触发 SELECT 元素的更改事件,而不是点击 https://stackoverflow.com/questions/4340690/javascript-onclick-alert-not-working-in-chrome(为什么我同时听单击和更改),但是当已经选择“编辑...”时,它实际上并不是changing所以不会触发事件。
那么,我该如何解决这个问题呢?我是否需要拦截所有焦点事件并做一些肮脏的工作来解释正在发生的事情?有没有办法让 Chrome 选择禁用选项而不是“编辑...”?
At Slavo 在评论中的建议 https://stackoverflow.com/questions/10918247/is-there-any-way-to-fire-a-click-event-on-a-select-element-in-chrome-even-if-the#comment14239809_10918247,我强制所有浏览器在 AJAX 注入时选择第一个选项:
// force select the first option (fixes a Chrome issue)
$('#theSelect option:selected').removeAttr('selected')
$('#theSelect option:first-child').attr('selected', 'selected');
这标准化了浏览器行为,并使 Chrome 选择禁用选项,而不是默认启用的“编辑...”选项。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)