jQuery .html made submit button doesn't work

Question

I am working on a simple color picker where you can click on a color, then a small example of the color appears with a submit button in it so you can select/submit this color.

I add the submit button to the clicked color with jQuery but for some reason my submit button doesn't submit.

So this piece adds the popup with submit when you click on a color:

$(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>');

And the submit is in a FORM and has a name "submit_color"

PHP:

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

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

endif;

I put the value of the color in a hidden field with name wz_color.

But why does my button not submit? Is this because it is added by jquery later?

Answer 1

When you click on a button, the click event is propagating up to the <span> that contains it, and that event handler is being triggered again. This appears to be interfering with the form submission.

Try blocking it immediately:

 $(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/

---

Note that delegating the cancellation using $(document).on('click','[name=submit_color], function(e) {...}) doesn't work, apparently because the event bubbles up to the span before it bubbles all the way up to the document.