javascript - If removeClass doesn't affect source code, what's the point? -

i have bunch of forms pattern:

<form action="/go/special" method="post" target="_blank"> <input name="a" type="hidden" value="something"/> <input type="submit" class="general effect" value="click me"></form> 

for each form has special inside action, want remove effect class using jquery code:

<script src="/js/colorbox.js"></script>  <script> jquery(function($) {     // find forms have "special" in action, find input, , add class     $('form[action*="special"] input[type="submit"]').removeclass('effect'); }); </script> 

edit:

effect class code:

(jquery, document, window), $(document).ready(function() {     $(".effect").click(function(t) {         t.preventdefault();         var e = $(this).closest("form");         return $.colorbox({             href: e.attr("action"),             transition: "elastic",             overlayclose: !1,             maxwidth: $("html").hasclass("ie7") ? "45%" : "false",             opacity: .8,             data: {                 ago: e.find('input[name="a"]').val(),             }         }), !1     }) 

link rest of colorbox code:

https://github.com/jackmoore/colorbox/blob/master/jquery.colorbox.js

the effect class colorbox plugin. if exists, form opened in same window modal window. if doesn't, form opened in new tab.

the script remove effect class, can see being removed when inspect element console.

the source-code however, not being affected, , still shows contains effect class.

therefore, when submit form, use colorbox plugin , open modal window, instead of new tab.

is there point in using removeclass in first place?

is there work-around?

the problem, far can see you're preventing default handling of submit click action (which submit form), description appears want default action happen. kind of confusing, i'll take want change behavior dynamically, depending on whether have class on submit button or not.

this perfect case event delegation. event delegation, in sense, way attach event handlers elements match condition, or in future, condition evaluated @ time of event, not @ time of attachment.

i assume want attach click handler submit buttons having effect class contained in form tag, , form tag exists @ time of attachment (page load).

$(function() {     $("form").on("click", "input[type='submit'].effect", function(t) {         t.preventdefault();         var e = $(this).closest("form");         return $.colorbox({             href: e.attr("action"),             transition: "elastic",             overlayclose: !1,             maxwidth: $("html").hasclass("ie7") ? "45%" : "false",             opacity: .8,             data: {                 ago: e.find('input[name="a"]').val(),             }         }), !1     }); }); 

what does, under hood:

1. finds form elements
2. attaches click handler every 1 of them, additionally adding input[type='submit'].effect selector it
3. when click event bubbles dom tree , reaches form element, source checked see if matches additional selector.
4. if matches, event handler executed. prevents default action (submitting form) , launches colorbox instead.
5. if doesn't match, continues bubble, triggering default action (form submit).