jquery event does not work on ajax result like table

Question

I created a table with radio button using ajax request. I want to get value from radio button by click event. But jquery event doesn't work on radio button. my created table by ajax below

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>

1. IDs need to be unique. Change the `id="s"` to `data-type="start", data-type="pause"` and so on. 2. defer the click to the nearest container: `$('#taskList').on("click","input[name='s']",function() { console.log($(this).data("type")) });` — mplungjan, May 16 '16 at 05:56

Luthando Ntsekwa · Accepted Answer · 2016-05-16T06:00:34.717

1

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(){

edited May 16 '16 at 06:00

answered May 16 '16 at 05:48

Luthando Ntsekwa

4,192
6
23
52

and use a class or the name since ID needs to be unique – mplungjan May 16 '16 at 05:49
@mplungjan you're right, i edited my answer – Luthando Ntsekwa May 16 '16 at 05:53
2

And use the nearest container to narrow down the event handling. In this case `#taskList` – mplungjan May 16 '16 at 05:57
Does not work yet....Please explain the reason @Flash – Salman Quader May 16 '16 at 06:03
1

you replaced this line `$('#taskList').on("click","#s", function(){` in my answer with this line `$('#taskList').on("click",".s", function(){` right? if not, please do that – Luthando Ntsekwa May 16 '16 at 06:05
my edited code $(document).ready(function(){ $(".tableShow").on("click",".s". function(){ // var status_val = $(this).val(); // alert(status_val); alert('hey'); }); }); – Salman Quader May 16 '16 at 06:06
also your radio buttons html should have a class like this `` , not an `id` – Luthando Ntsekwa May 16 '16 at 06:08
Yes, working now..... Thanks @ The Flash – Salman Quader May 16 '16 at 06:10

score 0 · Answer 2 · answered May 16 '16 at 05:48

0

Bind your click event using on:

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

Note: ID must me unique. So, either use classes or make sure you have unique id

answered May 16 '16 at 05:48

Sandeep Nayak

4,649
1
22
33

Does not work yet.....#Sandeep Nayak – Salman Quader May 16 '16 at 06:02

jquery event does not work on ajax result like table

2 Answers2