通过代码触发的元素弹出窗口立即关闭

Question

只是想知道是否有人遇到过这个问题，他们是否解决了？

当单击以下选择器“label[for='form-field-lampshade_shape']”（是一个表单标签）时，我试图触发一个弹出窗口。弹出窗口出现一瞬间然后关闭

我尝试通过 JS 和弹出窗口高级设置中的“通过选择器打开”选项执行此操作，两者的结果相同；弹出窗口字面上只是闪烁。

JS

jQuery("label[for='form-field-lampshade_shape']").click(function() {
    elementorProFrontend.modules.popup.showPopup( { id: 24601 } );
});

通过选择器打开

Answer 1

这似乎是标签特定的问题。当您单击输入字段的标签时，闪烁的光标默认跳转到相关的输入字段、文本区域或即选中复选框。当我将鼠标悬停在 Elementor 输入标签上时，我的光标从箭头变为手形，因此已经有一个单击事件侦听器绑定到标签。

一种解决方案是添加 e.preventDefault() 和 e in function( e )：

jQuery( 'label[for="form-field-lampshade_shape"]' ).click( function( e ) {
    e.preventDefault();
    elementorProFrontend.modules.popup.showPopup( { id: 24601 } );
});

或者您在弹出窗口的“Open By Selector”中输入例如 input[name="form-field-lampshade_shape"]，假设这是正确的输入字段。现在，单击标签或输入字段时会打开弹出窗口。