JQuery's .on('change') and an HTML5 input[type=color]

Question

I'm developing the website for my school's Virtual Enterprises class and need some help.

First off my code:

$(document).on('click', "#your-nook-theme-btn", function() {
var your_nook = $(this).parent(".og-grid").attr("#your-nook-theme-btn");
    $(".og-grid").hide('slide', 'swing', '5000ms', {direction: 'left'}, 1000);
    $(".main").prepend('<br> <div id="YN">Welcome to Your Nook, Modern Nook Design\'s newest innovation in interior design. Please pick your room\'s color scheme below. <br> <br> <div class="container" class="YN-order_form"><form method="POST" class="YN-order_form" id="YN-order_form"><span id="main-color-span">  <label for="main-color">Main Color: </label> <input type="color" id="main-color" value="#000000"></span><span id="accent-color-span"> <label for="accent-color">Accent Color: </label><input type="color" id="accent-color" name="accent-color" value="#ff0000"></span> <br> <br> <span id="step2"> Good. Now let\'s pick your decor. </span> <br> <br> </form></div></div>');
});

$(document).on('change', "#accent-color", function() {
    var accent = $(this).parent("YN").attr("#accent-color");
    $("#step2").fadeIn("slow");
});

So I want a span, #step2 , that is just below the two <input type="color"> fields to fade in when the user clicks on the red input field; however, I can't seem to figure out how to do this. I've tried .click and .change , but haven't had any luck. Any help you could offer would be greatly appreciated. Both the inputs and the span are added dynamically.

Answer 1

You can customize this with CSS and Javascript.

keep the initial style of the span to be visibility:hidden . Upon click, change the visibility attribute to visible .

The jQuery function is $("#<id>").attr("visibility", "visible");

Answer 2

Just change your css for step2 and your code will work:-

#step2 {
    display: none;
}