php - 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>');

并且提交是在一个表单中并且有一个名字“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) {...}) 委托(delegate)取消不起作用，显然是因为事件冒泡到 span在它一直冒到 document 之前.