Salman Quader Salman Quader - 6 months ago 13
Javascript Question

jquery event does not work on ajax result like table

I created a table with radio button using ajax request. I want to get value from radio button by click event. But jquery event does not work on radio button.
my created table by ajax bellow,

enter image description here

I have called this ajax result by bellow code

<code>
<script type="text/javascript">
$(document).ready(function(){
$(".todayTask").click(function(){
var employee = '<?php echo trim($userID);?>';
$.ajax({
url: "ajax_call.php",
type:"POST",
data:{userID:employee},
success: function(result){
$('#taskList').html(result);
}});
});
});
</script>
</code>

Now I want to get value from radio button which stay in ajax result.....
by below code but does not work....

<code>
<script type="text/javascript">
$(document).ready(function(){
$("#s").click(function(){
var status_val = $(this).val();
alert(status_val);
});
});
</script>
</code>

Answer

Since your radio buttons are loaded via jquery, you need to use on event:

$(document).ready(function(){
        $('#taskList').on("click","#s", function(){
            var status_val = $(this).val();
            alert(status_val);
        });
    });

You need to also use a class ".s" instead of an ID "#s", because an ID needs to be unique, here is an example:

$('#taskList').on("click",".s", function(){