jQuery 添加块表单对话框中的字体选择器提交表单而不是选择字体
jQuery font picker in add block form dialog submits form instead of selecting font
我想在“添加块”表单对话框(Concrete5 CMS 的一部分)中使用 Google 字体选择器 ( https://www.npmjs.com/package/font-picker )。但是,当我单击字体选择器 select 时,它会提交表单而不是简单地 selecting 字体。字体选择器 select 事件和表单对话框提交之间似乎存在 JS 冲突。
有人知道如何解决这个问题吗?
谢谢。
代码(使用 JS 弹出的添加块表单对话框的一部分):
<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();
}
});
e.target
实际上引用了一个 DOM 节点,而不是 jQuery 对象。您应该通过向其附加 [0]
将其与从 jQuery 对象返回的 DOM 节点进行比较:
if (e.target !== $('#ccm-form-submit-button')[0]) { ... }
或者,更简单的方法是检查目标的 ID:
if (e.target.id !== 'ccm-form-submit-button') { ... }
我想在“添加块”表单对话框(Concrete5 CMS 的一部分)中使用 Google 字体选择器 ( https://www.npmjs.com/package/font-picker )。但是,当我单击字体选择器 select 时,它会提交表单而不是简单地 selecting 字体。字体选择器 select 事件和表单对话框提交之间似乎存在 JS 冲突。
有人知道如何解决这个问题吗?
谢谢。
代码(使用 JS 弹出的添加块表单对话框的一部分):
<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();
}
});
e.target
实际上引用了一个 DOM 节点,而不是 jQuery 对象。您应该通过向其附加 [0]
将其与从 jQuery 对象返回的 DOM 节点进行比较:
if (e.target !== $('#ccm-form-submit-button')[0]) { ... }
或者,更简单的方法是检查目标的 ID:
if (e.target.id !== 'ccm-form-submit-button') { ... }