CODEWITHSUNDEEP
javascriptjquerydom
James123
James123

Reputation: 11652

RadioButton change jquery method not working after DOM changes?

I am changing html of the radiobutton (name of the radiobutton is the same) through ajax based on logice (Rates, duration changes). Before DOM changes change(function(e) method works perfect, once it DOM changes change(function(e)not working. What I'm doing wrong?

<tr>
        <td>
            <input type="radio" name="membershipTerm" checked="@yr1"  value="@membership.Year1RateCode">
        </td>
        <td>1 Year  Membership (@startDate to @Convert.ToDateTime(membership.CycleEndDate).Date.ToString("MMM yyyy"))</td>
        <td>1 Year</td>
        <td style="text-align: right">$<span class="membershipPrice">@membership.Year1Price</span> USD</td>
    </tr>


  $('input[type=radio][name=membershipTerm]').change(function(e) {
            var price = $(e.target).parent().parent().find("span").text();
            membershipData.updatemembershipPrice(price);

Upvotes: 0

Views: 29

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need to use event delegation for attaching events to dynamically added DOM elements:

$(document).on('change','input[type=radio][name=membershipTerm]',function(e) {
        var price = $(e.target).parent().parent().find("span").text();
        membershipData.updatemembershipPrice(price);

Upvotes: 1

Related Questions