Why does my jQuery script only execute once?

I have the following jQuery script in my page, but it is only executing once, after the page is initially loaded. I'm trying to check the value of a radiobuttonlist control, each time it is clicked. But its only happening when the page is loaded initially.

        $(document).ready(function () {
            $('.rblReqType input').click(function () {
                var thisVal = $(this).val();
                if (thisVal == '2') {
                    alert('TEST');
                    $("[id$=spnDept]").text('Department');
                }
            });
        });

Open in new window


here is a snippet of my HTML

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:Panel ID="pnlReturnToList" runat="server">
    </asp:Panel>
    <div class="clear" />
    <asp:ScriptManager runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <br />
            <table align="center" cellpadding="0" cellspacing="0" class="style14">

		.
		.
		.
		                                        <td style="vertical-align: bottom; float: left;">
                                            <asp:RadioButtonList ID="ddlRequestType1" runat="server" CssClass="rblReqType" RepeatDirection="Horizontal"
                                                OnSelectedIndexChanged="ddlRequestType1_SelectedIndexChanged" AutoPostBack="true">
                                                <asp:ListItem Selected="True" Text="ADD" Value="0" />
                                                <asp:ListItem Text="CHANGE" Value="1" />
                                                <asp:ListItem Text="DEACTIVATE" Value="2" />
                                            </asp:RadioButtonList>
                                        </td>

Open in new window

LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Are these radio buttons being reloaded via ajax?
0
leakim971PluritechnicianCommented:
replace :
$('.rblReqType input').click(function () {
by (if you've jQuery version greater or equal to 1.9) :
$('#<%= UpdatePanel1.ClientID %>").on("click", ".rblReqType input", function () {
or by by (if you've jQuery version lower than 1.9) :
$('.rblReqType input').live("click", function () {

because you've an update panel which replace(new content loaded with ajax) the radio buttons with new one and their bind events attached
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Gary: no.

@leakim971: ok, that worked, but it didn't. what i mean is, it changed the value but then quickly erased it. I need the value to stick.
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Michael SterlingWeb Applications DeveloperAuthor Commented:
Just to add some more detail, now, even going back to the original way I had it written, it is still "flickering" the value in and out. It wasn't doing that before, with the way i had it written originally.
0
leakim971PluritechnicianCommented:
so don't use an update panel or use :

$('#<%= UpdatePanel1.ClientID %>").on("click", ".rblReqType input", function (event) {
    event.preventDefault();
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
@leakim971: while, that is causing me to not be able to select either of the other two radial buttons. it does display the message in my span, but can't choose any other radial buttons.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
@leakim971: what i described above happens in Firefox. in IE it displays the alert message, flickers my changed text, erases my changed text and default the radiobuttonlist back to its default selection, which is the first radial button.
0
leakim971PluritechnicianCommented:
I have not solution for you, you should rethink your application IMHO but wait other experts advice
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
Thank you. I'll continue to look and wait.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
I solved it but not using jQuery, so i'm going to post my solution and see what happens.

I just added runat="server" to my span tag and changed it when the radiobuttonlist value changed.

my HTML
                                        <td style="vertical-align: bottom; float: left;">
                                            <asp:RadioButtonList ID="ddlRequestType1" runat="server" CssClass="rblReqType" RepeatDirection="Horizontal"
                                                OnSelectedIndexChanged="ddlRequestType1_SelectedIndexChanged" AutoPostBack="true">
                                                <asp:ListItem Text="ADD" Value="0" />
                                                <asp:ListItem Text="CHANGE" Value="1" />
                                                <asp:ListItem Text="DEACTIVATE" Value="2" />
                                            </asp:RadioButtonList>
                                        </td>
					.
					.
					.
					<span id="spnDept" style="color: Red;" runat="server">*</span>

Open in new window


my C# code behind
    protected void ddlRequestType1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if ((ddlRequestType1.SelectedIndex == 0))
        {
            spnDept.InnerText = "*";
            lblHrDtTermDt.Text = "Hire Date:";
        }
        else if (ddlRequestType1.SelectedIndex == 1)
        {
            spnDept.InnerText = "*";
            lblHrDtTermDt.Text = "Change Date:";
        }
        else if (ddlRequestType1.SelectedIndex == 2)
        {
            spnDept.InnerText = "";
            lblHrDtTermDt.Text = "Termination Date:";
        }
    }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michael SterlingWeb Applications DeveloperAuthor Commented:
really wanted to solve this with jQuery. but i guess "there's more than one way to skin a cat...". no offense to animal lovers. i love dogs (all animals really :-) )
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.