0

我想在“添加块”表单对话框（Concrete5 CMS 的一部分）中使用 Google 字体选择器（https://www.npmjs.com/package/font-picker）。但是当我单击字体选择器选择时，它会提交表单而不是简单地选择字体。似乎字体选择器选择事件和表单对话框提交之间存在 JS 冲突。

有谁知道如何解决这个问题？

谢谢你。

代码（与 JS 一起弹出的 Add Block 表单对话框的一部分）：

<div class="form-group">
    <?php
    echo $form->label('font', t('Select text font family'));
    ?>
    <div id="font-picker"></div>
</div>
<div class="form-group">
    <p class="apply-font">Image text preview</p>
</div>

<script>
$(function(){    
    const fontPicker = new FontPicker(
    'Google-API-key', // Google API key
    'Open Sans', // default font
    {limit: 50}, // additional options
  );
});
</script>

[解决了]

感谢特里：

$('#ccm-block-form').on("click", ":submit", function(e) {
    if (e.target.id !== 'ccm-form-submit-button')
    {
        e.preventDefault();
    }
});
4

1 回答 1

0

e.target实际上引用了一个 DOM 节点，而不是一个 jQuery 对象。您应该通过向其附加 a 来将其与从 jQuery 对象返回的 DOM 节点进行比较[0]：

if (e.target !== $('#ccm-form-submit-button')[0]) { ... }

或者，更简单的方法是检查目标的 ID：

if (e.target.id !== 'ccm-form-submit-button') { ... }
于 2018-05-01T13:59:31.097 回答