javascript - Jquery 函数在 ASP.NET 用户控件中没有被触发

Question

我创建了一个包含 RadioButtonList 的用户控件。根据 RadioButtonList 选择，特定项将可见或隐藏。以下是我的 HTML 代码:

<tr>
                            <td align="left" valign="middle">
                            <font size="2" face="Verdana, Arial, Helvetica, sans-serif">
                            Are you the Financial Analyst/Manager responsible for this profit center?
                            </font>
                            </td>
                            <td align="left" valign="middle">
                            <asp:RadioButtonList ID="RadioButtonListYesNo" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Value="1">Yes</asp:ListItem>
                            <asp:ListItem Value="2">No</asp:ListItem>
                            </asp:RadioButtonList>
                            </td>
                            </tr>

<tr>
                        <td>
                        <div id="divFAFMQues" style="visibility:hidden;">                                               
                        <font size="2" face="Verdana, Arial, Helvetica, sans-serif">
                        Who is the FM/FA of this profit center?
                        </font> 
                        </div>                      
                        </td>
                        <td>
                        <div id="divFAFM" style="visibility:hidden;">
                        <input name="FAFM" type="text" id="TextFAFM" maxlength="20"/> 
                         </div>
                        </td>
                        </tr>

以下是我的 Jquery 函数:

 <script src="~/Scripts/jquery-1.11.2.js" type="text/javascript">
        $(document).ready(function () {

            $("input[id$=RadioButtonListYesNo]").change(function () {
                alert("In Jquery");
                var res = $('input[type="radio"]:checked').val();

                if (res == '1') {
                    $("#divFAFMQues").css("visibility", "hidden");
                    $("#divFAFM").css("visibility", "hidden");
                }
                else {

                    $("#divFAFMQues").css("visibility", "visible");
                    $("#divFAFM").css("visibility", "visible");
                }
            });
        });
    </script>

Jquery 函数根本没有被触发，我无法使警报得到执行。我这里哪里出错了？我需要向我的解决方案添加更多 jquery 文件吗？

Answer 1

你需要将jquery和你的js代码分开，像这样

<script src="~/Scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function () {

        $("input[id^=RadioButtonListYesNo]").change(function () {
            alert("In Jquery");
            var res = $('input[type="radio"]:checked').val();

            if (res == '1') {
                $("#divFAFMQues").css("visibility", "hidden");
                $("#divFAFM").css("visibility", "hidden");
            }
            else {

                $("#divFAFMQues").css("visibility", "visible");
                $("#divFAFM").css("visibility", "visible");
            }
        });
    });

</script>

使用 2 个单独的 script 标记，一个用于添加 js 脚本文件，另一个用于内联 js 代码。

现在，jquery 说:

$('[id^=hello]') 选择 ID 开头为的所有元素你好。
$('[id$=hello]') 选择 ID 以结尾的所有元素你好。

使用您的代码，asp.net 会生成 2 个 radio 类型的输入，其 ID 为 RadioButtonListYesNo_0 和 RadioButtonListYesNo_1。在您的代码中，您使用的选择器 id$=RadioButtonListYesNo 永远不会匹配任何输入，因此，您需要将其更改为 id^=RadioButtonListYesNo 正如我所写如上所述。