Почему этот jQuery приводит к сбою *all* моего jQuery?

Question

Я добавил этот jQuery в попытке условно показать некоторые элементы:

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

Этот код основан на коде отсюда; Я изменил "есть" на "нет", потому что мне нужно действовать, когда строка не видна.

... но он не только не работает (нажатие кнопки "+" (btnAddFoapalRow) не делает строки видимыми), но и другой jQuery, предшествующий ему, также не работает. Что не так с jQuery выше, и почему это так навязчиво / обструкционистски?

Вот все jQuery для контекста / вашего удовольствия от чтения:

$(document).ready(function () {
    console.log('The ready function has been reached'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
});

/* If the select "Yes" (self-identify as UCSC Faculty, Staff, or Student), prompt them to log in */
$(document).on("change", '[id$=ckbxUCSCFacultyStaffOrStudent]', function () {
    var ckd = this.checked;
    if (ckd) alert('Please log in prior to continuing with this form');
});

/* If the select "Yes" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the 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 up txtbxSSNOrITIN accordingly - was ckbxEmp, which 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 to ssnmaxlen characters */
        return ckd && v.length > ssnmaxlen ? v.slice(0, ssnmaxlen) : $input.data("oldValue");
    });

    $lbl.text(ckd ? "SSN - last 4 digits" : "ITIN");
    /* This sets focus to the end of the textbox (multiplication by 2 is because some characters are counted as two) */
    var strLength = $input.val().length * 2;
    $input.focus();
    $input[0].setSelectionRange(strLength, strLength);
});

$(document).on("keypress", '[id$=txtbxSSNOrITIN]', function (e) { 
    /* For now, just "eating" non-numeric entries (from http://jsfiddle.net/zpg8k/); will change when the business rules for ITIN are 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();
    }
});

Это в проекте Sharepoint 2010. Я пытался выполнить то же самое, используя код на стороне сервера (C#), но это также не работает из-за каждого нажатия кнопки, снова отправляющей страницу. Я спросил об этом здесь [ Почему мой no-submit (HtmlButton) все еще отправляет?

Соответствующий код-это:

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;

ОБНОВИТЬ

Я изменил jQuery на это, чтобы я мог убедиться, что код достигается (добавил вызовы console.log ()):

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

... и я вижу, что "достиг ветки foapalrow3 not visible" в консоли в Chrome, но визуально на странице ничего не происходит.

Интересно, действительно ли мне нужно что-то вроде этого:

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

вместо этого:

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

? Если да, то каков правильный синтаксис для этого (настройка, видимая в true)?

ОБНОВЛЕНИЕ 2

Я попробовал это:

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

... но не радость в Mudville.

Answer 1

Это совершенно неправильно

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

Измените это на:

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