通过 jQuery 插入复选框会停止表单在 webkit 上提交答案

【问题标题】：Inserting a checkbox via jQuery stops the form to submit on webkit通过 jQuery 插入复选框会停止表单在 webkit 上提交
【发布时间】：2015-09-30 01:39:18
【问题描述】：

我有一个带有按钮和复选框的基本表单。复选框通过 jQuery 加载，如下所示：

jQuery('.markitfixed').prepend('<input type="checkbox" /> ');

当您单击提交按钮中的复选框（类markitfixed）时，webkit 浏览器（Chrome、Safari...）上没有任何反应

它在 Firefox 上运行良好。

为了证明这一点，打开jFiddle demo 并点击复选框。

我该怎么做才能让它在 webkit 浏览器上运行？

【问题讨论】：

一旦符合条件，我将奖励这个问题 50 分。
我在 chrome 45.0.2454.101 m 中看到“表单正在工作”警报
你是说它在 chrome 中不起作用？
@Navoneel 您是否专门点击了 复选框 而不是按钮的其余部分？请注意，该按钮有效，只是复选框单击无效。另外，你能在 Safari 上测试一下吗？
啊，我明白了..但是很惊讶检查更改事件在哪里？你没有对复选框做任何事情。我没有 firefox..正在安装，看看它是如何工作的..等待

标签： jquery checkbox webkit

【解决方案1】：

现在检查这个http://jsfiddle.net/59r50ep5/4/。它在 chrome 中工作。

// inserts checkbox insire button
jQuery('.markitfixed').prepend('<input type="checkbox" /> '); 

$(document).on('click', '.mark', function () {
        alert("form is working!");
        return false;
});

编辑 1

现在你想保留提交事件，然后这样做

$(document).on('click', '.mark', function () {
        jQuery('.mark').submit();
        alert("form is working!");
        return false;
});

编辑 2

由于您想在表单提交上触发一些代码，保持原始代码不变，您可以这样做：

// inserts checkbox insire button
jQuery('.markitfixed').prepend('<input type="checkbox" /> ');

$(document).on('click', '.mark', function () {
       jQuery('.mark').submit();
        alert("form is working!");      


});

$('.mark').on('submit', function() {
  alert('You submitted the form!');
});

为你更新了小提琴Updated JSFiddle。

【讨论】：

有趣。但是，我需要它在单击时处理 jQuery 函数“ajaxSubmit_mark”。你能编辑你的帖子/jsfiddle吗？原来的触发器是：jQuery('.mark').submit(ajaxSubmit_mark);
感谢您的更新，但我需要像原始代码一样触发 ajaxSubmit_mark() 函数的代码：jsfiddle.net/59r50ep5/2 - 任何机会都可以做到并且仍然使复选框像在您的示例中一样工作？
我可以知道您在使用我的代码时遇到了什么问题吗？为什么我向您展示了 .on 的用法？无论如何，它不会像 jQuery('.mark').submit(ajaxSubmit_mark) 这样直接工作。
如果它对你有用，请不要忘记接受答案。这将有助于未来的读者。
对不起，让我解释一下。请看这个新的小提琴：jsfiddle.net/q4pxrd6q 如你所见，我正在触发一个特定的功能。您能否更新该 jsfiddle 并更改该 jQuery 代码以使其适用于您自己的解决方案？希望有了这个，我们可以打破我们之间的困惑。再次感谢。不用担心，我会用自己的代码理解解决方案后立即标记为已修复。

【解决方案2】：

你看过这个话题吗？ Click on checkbox inside a button element - Firefox issue

看起来这是 FF 中的一个问题。

交互式元素输入不得作为按钮元素。

请看这里：http://www.w3.org/TR/html-markup/input.button.html

【讨论】：