Shankar Thiyagaraajan Shankar Thiyagaraajan - 2 months ago 10
jQuery Question

After Ajax Refresh, Elements are not working properly

After the Ajax refresh of div tag with new data,

Here i try to get value of radio button [checked], by using the following code.

Before HTML :

<div id="summery">

</div>


jQuery Block 1 :

$.ajax({
url: site_addr + '/new_row_rec',
type: 'POST',
success: function (res) {
/** If error is hit, then redirect */
if (res.error_url) {
location.reload(res.error_url);
}
$('#summery').html(res);
}
});


HTML:

<div id="summery">
<input type="radio" name="payment_type[]" class="payment_type"
value="A">

<input type="radio" name="payment_type[]" class="payment_type"
value="B">
</div>


jQuery Block 2 :

$('.payment_type').on('click', function () {
var row = $('input[name="payment_type"]:checked').val();
console.log('Row : ' + row)
}


I get error as :

Row : undefined


Here, jQuery Block 1 is executed first and html contents are loaded.
After that, jQuery Block 2 is run by on click event of radio button.

I think there is an element binding issue, is it so. Then what's the solution for this ?

or

Any other ways to get the value of radio button after the refresh.

Note : jQuery Event Trigger on Main Page to Newly Loaded Page.

Answer

Your inputs' name is payment_type[] so the jQuery statements should have been:

$('.payment_type').on('click', function () {
   var row = $('input[name="payment_type[]"]:checked').val();
   console.log('Row : ' + row)
});

As a result:

enter image description here