jQuery函数未在asp.net用户控件中触发

Question

I have created a user control which contains RadioButtonList. Based on the RadioButtonList selection a particular would be visible or hidden. Following is my HTML code:

<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>

Following is my Jquery function:

 <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>

The Jquery function is not getting fired at all, I could not make the alert to get executed. Where am I going wrong here? Do I need to add any more jquery files to my solution?

Answer 1

you need to separate the inclusion of jquery and your js code, something like this

<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>

use 2 separate script tag, one for adding a js script file and another for inline js code.

Now, jquery says:

$('[id^=hello]') selects all elements that have an ID beginning with hello.
$('[id$=hello]') selects all elements that have an ID ending with hello.

with your code asp.net generates 2 input of type radio with id RadioButtonListYesNo_0 and RadioButtonListYesNo_1 . In your code your are using the selector id$=RadioButtonListYesNo that will never match any of the inputs, so, you need to change it for id^=RadioButtonListYesNo as i wrote above.