c# - Why does this jQuery cause *all* my jQuery to fail? -

i've added jquery in attempt conditionally show elements:

$(document).on("click", '[id$=btnaddfoapalrow]', function (e) {     if $('[id$=foapalrow3]').not(":visible");         $('[id$=foapalrow3]').slidedown();     }      else if $('[id$=foapalrow4]').not(":visible");         $('[id$=foapalrow4]').slidedown();     } }); 

this code based on code here; changed "is" "not" because need act when row not visible.

...but not not work (clicking "+" button (btnaddfoapalrow) not make rows visible), causes other jquery precedes non-functional, too. wrong jquery above, , why obtrusive/obstructionistic?

here jquery context/your reading pleasure:

$(document).ready(function () {     console.log('the ready function has been reached'); /* "sanity check" can verified jquery script running/ran */ });  /* if select "yes" (self-identify ucsc faculty, staff, or student), prompt them log in */ $(document).on("change", '[id$=ckbxucscfacultystafforstudent]', function () {     var ckd = this.checked;     if (ckd) alert('please log in prior continuing form'); });  /* if select "yes" (they seeking payment themselves, opposed else), omit (invisibilize) sections 2 , 3 on form */ $(document).on("change", '[id$=ckbxpaymentforself]', function () {     if (this.checked) {         $('[id$=panelsection2]').slideup();         $('[id$=panelsection3]').slideup();         $('[id$=rbpaymenttoindividual]').prop("checked", true);         $('[id$=_mailstoprow]').slidedown();         $('[id$=_addressrows]').slideup();     }     else {         $('[id$=panelsection2]').slidedown();         $('[id$=panelsection3]').slidedown();         $('[id$=rbpaymenttoindividual]').prop("checked", false);         $('[id$=_mailstoprow]').slideup();         $('[id$=_addressrows]').slidedown();     } });  /* when "ucsc insider" checkbox changes state, set txtbxssnoritin accordingly - ckbxemp, has been deprecated/removed */ $(document).on("change", '[id$=ckbxucscfacultystafforstudent]', function () {     var ssnmaxlen = 4;     var itinmaxlen = 11;     var ssntextboxwidth = 40;     var itintextboxwidth = 100;     var ckd = this.checked;     var $input = $('[id$=txtbxssnoritin]');     var $lbl = $('[id$=lblssnoritin]');      if (ckd) $input.data("oldvalue", $input.val()); // remember current value      $input.prop("maxlength", ckd ? ssnmaxlen : itinmaxlen).css({         background: ckd ? 'yellow' : 'lightgreen',         width: ckd ? ssntextboxwidth : itintextboxwidth     }).val(function (i, v) {         /* if checked, trim textbox contents ssnmaxlen characters */         return ckd && v.length > ssnmaxlen ? v.slice(0, ssnmaxlen) : $input.data("oldvalue");     });      $lbl.text(ckd ? "ssn - last 4 digits" : "itin");     /* sets focus end of textbox (multiplication 2 because characters counted two) */     var strlength = $input.val().length * 2;     $input.focus();     $input[0].setselectionrange(strlength, strlength); });  $(document).on("keypress", '[id$=txtbxssnoritin]', function (e) {      /* now, "eating" non-numeric entries (from http://jsfiddle.net/zpg8k/); change when business rules itin known */     var k = e.which;     if (k < 48 || k > 57) { e.preventdefault(); } });  $(document).on("click", '[id$=btnaddfoapalrow]', function (e) {     if $('[id$=foapalrow3]').not(":visible");         $('[id$=foapalrow3]').slidedown();     }      else if $('[id$=foapalrow4]').not(":visible");         $('[id$=foapalrow4]').slidedown();     } }); 

this in sharepoint 2010 project. i've tried accomplish same thing using server-side (c#) code, too, not working, due each click of button submitting page again. asked here [why no-submit (htmlbutton) still submit?

the pertinent code-behind is:

htmlbutton btnaddfoapalrow = null; . . .        btnaddfoapalrow = new htmlbutton(); btnaddfoapalrow.attributes["type"] = "button"; btnaddfoapalrow.innerhtml = "+";  btnaddfoapalrow.id = "btnaddfoapalrow"; this.controls.add(btnaddfoapalrow);       foapalrow3 = new htmltablerow(); foapalrow3.id = "foapalrow3"; foapalrow3.visible = false; . . . foapalrow3 = new htmltablerow(); foapalrow3.id = "foapalrow3"; foapalrow3.visible = false; 

update

i changed jquery this, verify code being reached (added calls console.log()):

$(document).on("click", '[id$=btnaddfoapalrow]', function (e) {     if ($('[id$=foapalrow3]').not(":visible")) {         console.log('reached foapalrow3 not visible branch');         $('[id$=foapalrow3]').slidedown();     }     else if ($('[id$=foapalrow4]').not(":visible")) {         console.log('reached foapalrow4 not visible branch');         $('[id$=foapalrow4]').slidedown();     } }); 

...and see 'reached foapalrow3 not visible branch' in console in chrome, nothing happens visually on page.

i wonder if need this:

$('[id$=foapalrow3]').visible(); 

instead of this:

$('[id$=foapalrow3]').slidedown(); 

? if so, proper syntax (setting visible true)?

update 2

i tried this:

$('[id$=foapalrow3]').attr("visibility", "visible"); 

...but no joy in mudville.

this totally wrong:

if $('[id$=foapalrow3]').not(":visible");     $('[id$=foapalrow3]').slidedown(); }  else if $('[id$=foapalrow4]').not(":visible");     $('[id$=foapalrow4]').slidedown(); } 

change to:

if ($('[id$=foapalrow3]').not(":visible")) {     $('[id$=foapalrow3]').slidedown(); }  else if ($('[id$=foapalrow4]').not(":visible")) {     $('[id$=foapalrow4]').slidedown(); }