jQuery .html提交提交按钮不起作用

Question

我正在使用一个简单的颜色选择器，您可以在其中单击颜色，然后会出现一个颜色的小示例，其中包含一个提交按钮，以便您可以选择/提交此颜色。

我使用jQuery将提交按钮添加到单击的颜色，但由于某种原因，我的提交按钮不会提交。

因此，当您点击颜色时，此片段会在弹出窗口中添加提交：

$(this).addClass('selected_color').html(
        num + '<div class="this_color"><div class="color_example">Color value</div><input type="submit" name="submit_color" value="Selecteer kleur"/></div>');

提交内容为FORM，名称为“submit_color”

PHP：

if(isset($_POST['submit_color'])) :

    $_SESSION['wz_color'] = $_POST['wz_color'];

endif;

我将颜色的值放在名为wz_color的隐藏字段中。

但为什么我的按钮没有提交？这是因为它后来被jquery添加了吗？

Answer 1

当您单击某个按钮时，click事件将传播到包含它的<span>，并且该事件处理程序将再次被触发。这似乎干扰了表单提交。

立即尝试阻止它：

 $(this).addClass('selected_color').html(num + '<div class="this_color"><div class="color_example">Color value</div><input type="submit" name="submit_color" value="Selecteer kleur"/></div>');
 $('[name=submit_color]').click(function(e) { e.stopPropagation(); });

http://jsfiddle.net/mblase75/ve5Kh/

---

请注意，使用$(document).on('click','[name=submit_color], function(e) {...})委派取消不起作用，显然是因为事件在span之前一直冒泡到document。

Answer 2

您错过了表单标记。

$(this).addClass('selected_color').html(
        num + '<div class="this_color">
        <div class="color_example">Color value</div>
            <form method="POST" action="">
                <input type="submit" name="submit_color" value="Selecteer kleur"/>
            </form>
        </div>');

Answer 3

这是因为你要在“表单”中附加一个元素（位置绝对 - 不确定这是否重要）并且表单不会将提交按钮识别为她自己的。 您应该在页面渲染时加载提交按钮，然后移动它。