为什么我的所有 slideUp 都不起作用？

Question

我有这个 jQuery:

$(document).ready(function () {
    $('[id$=_AddressRows]').slideUp();
    $('[id$=panelSection2]').slideUp();
    $('[id$=panelSection3]').slideUp();
    $('[id$=ddlPayToIndividual]').slideUp();
    $('[id$=ddlPayToVendor]').slideUp();
});

...在大多数情况下，它们会完成它们的工作，并隐藏它们应该隐藏的元素。

但是，最近添加的两个，最后两个（用于下拉列表）不起作用。

我正在用 C# 创建元素，如下所示：

// add the comboboxes
DropDownList ddlPaymentToIndividual = new DropDownList();
ddlPaymentToIndividual.ID = "ddlPayToIndividual";
ddlPaymentToIndividual.Items.Add(new System.Web.UI.WebControls.ListItem("Select type", "0"));
ddlPaymentToIndividual.Items.Add(new System.Web.UI.WebControls.ListItem("Damage Payment", "1"));
ddlPaymentToIndividual.Items.Add(new System.Web.UI.WebControls.ListItem("Fellowship / Scholarship", "2"));
ddlPaymentToIndividual.Items.Add(new System.Web.UI.WebControls.ListItem("Funded Activity", "3"));
ddlPaymentToIndividual.Items.Add(new System.Web.UI.WebControls.ListItem("Gift (Non-cash)", "4"));
ddlPaymentToIndividual.Items.Add(new System.Web.UI.WebControls.ListItem("Honorarium", "5"));
ddlPaymentToIndividual.Items.Add(new System.Web.UI.WebControls.ListItem("Online Training & Development", "6"));
ddlPaymentToIndividual.Items.Add(new System.Web.UI.WebControls.ListItem("Participant Support", "7"));
ddlPaymentToIndividual.Items.Add(new System.Web.UI.WebControls.ListItem("Prize / Award (Non-cash)", "8"));
cellRadioButton1_2.Controls.Add(ddlPaymentToIndividual);

DropDownList ddlPaymentToVendor = new DropDownList();
ddlPaymentToVendor.ID = "ddlPayToVendor";
. . .

...但尽管已向上滑动，但它们仍显示。为什么？

相关的呈现 HTML 是：

<td><select name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ddlPayToIndividual" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_ddlPayToIndividual">
                                <option value="0">Select type</option>
                                <option value="1">Damage Payment</option>
                                <option value="2">Fellowship / Scholarship</option>
                                <option value="3">Funded Activity</option>
                                <option value="4">Gift (Non-cash)</option>
                                <option value="5">Honorarium</option>
                                <option value="6">Online Training &amp; Development</option>
                                <option value="7">Participant Support</option>
                                <option value="8">Prize / Award (Non-cash)</option>

                            </select></td>
                            <td><select name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ddlPayToVendor" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_ddlPayToVendor">
                                <option value="0">Select type</option>
                                <option value="1">Donation / Contribution</option>
                                <option value="2">Membership</option>
                                <option value="3">Postage/Outbound Freight</option>
                                <option value="4">Refund to Research Agency</option>
                                <option value="5">Utilities</option>
                                <option value="6">Subscription</option>
                                <option value="7">Other/Miscellaneous</option>

                            </select></td>

此外，上面显示的 jQuery 代码是逐字呈现的。

注意："hide" 也不起作用；我尝试将 "ready" 函数中的代码更改为：

$('[id$=ddlPayToIndividual]').hide();
$('[id$=ddlPayToVendor]').hide();

...但这没有区别。

更新

原来这段代码：

$(document).on("click", '[id$=rbPaymentToIndividual]', function () {
    if (this.checked) {
        $('[id$=ddlPayToVendor]').slideUp();
        $('[id$=ddlPayToIndividual]').slideDown();
    }
});

$(document).on("click", '[id$=rbPaymentToVendor]', function () {
    if (this.checked) {
        $('[id$=ddlPayToIndividual]').slideUp();
        $('[id$=ddlPayToVendor]').slideDown();
    }
});

...正在工作（选择单选按钮确实会向上滑动一个，然后向下滑动另一个）。所以这不是 slideUp() 本身的问题。这是一个 "timing" 问题 - 当在就绪函数中调用 slideUp() 时，尚未创建下拉列表，因此调用被忽略了吗？如果是这样，为什么 other slideUp() 会起作用？

Answer 1

正如 "they" 所说，"timing is everything." 这种代码必须放在 "ready" 函数中，而不是放在 window 加载函数中，就像这样:

/* NOTE: Things that need to take place after all the elements have been constructed need to go here; the ready function can be too early */
$(window).load(function () {
    $('[id$=_AddressRows]').slideUp();
    $('[id$=panelSection2]').slideUp();
    $('[id$=panelSection3]').slideUp();
    $('[id$=ddlPayToIndividual]').hide();
    $('[id$=ddlPayToVendor]').hide();
});

为什么我的所有 slideUp 都不起作用？

Why are not all of my slideUps working?

c#

jquery

html-select

slideup

更新