html - Jquery: React to dynamic classes in forms -

i have made html form split sections.

i using jquery add classes body element depending on sections have been filled in.

by default, body has class of purchase-stop. when sections filled in, changes purchase-go.

when user clicks on submit button, use following code display message:

$("input").on('click', '.purchase-stop', function() {     alert("you haven't visited sections. please visit them ensure happy choices"); }); 

the trouble display purchase-stop has been changed purchase-go.

how can display when classes purchase-stop?

also, 2 fields on form mandatory. use following code check if these mandatory sections filled in:

$(".changing-room").submit(function(e)     {         e.preventdefault();          var isformvalid = true;         $("input.required").each(function()         {             if ($.trim($(this).val()).length === 0)             {                 $(this).parent().addclass("error");                  isformvalid = false;             }             else             {                 $(this).parent().removeclass("error");             }         });         if (!isformvalid)         {             alert("some fields blank (highlighted in red). please fill them in");             $('input').blur();         }          if (isformvalid)         {             $('body').addclass('purchase-active');             window.scrollto(0, 0);         }         return isformvalid;      }); 

but again, want run when body class set purchase-go (and not purchase stop).

according jquery docs, have jquery run on dynamic class (as purchase-go not in html on load). this, have use on() function. on function made follows:

.on("action [e.g. click]", "[trigger element]", function(event) 

however, have specified trigger element, doesn't work.

on() doesn't work way think.

$("[source].on("[action]", "[trigger element]", function(event)

when use on, binding source element, , event triggered action when occurs on trigger element within source.

so in case, setting click handler fire when element class purchase-stop which descendant of input clicked.

you need this:

$('input[type="submit"]').click(function(e) {     if ($('body').hasclass('purchase-stop')) {         alert("you haven't visited sections. please visit them ensure happy choices");     } }); 

though, using class name on body indicate whether form valid little odd. add functionality validation function.