Jquery function not working on AJAX returned Data

Question

Here is my scenario, I have a Drop Down Select Option, by using this I get Category wise(Pending, Closed & All)Results using JQuery and AJAX. The data I get from AJAX(getcomplaints.php) contains another Dynamic Drop Down Select Option that works for on page operations. Now the issue is Jquery funtion to get the value of Select options is working on First List but When Data returns from AJAX page(getcomplaints.php) Containing another Drop Down options is not working. I don’t know why but Following Jquery function is Not working on AJAX returned data.

HTML

<select name="categories" id="getcomplaints" class="form-control">
<option value="all">All Categories</option>
<?php $c=$con->query("SELECT * FROM status");
while($cat=mysqli_fetch_array($c)){
?>
<option value="<?php echo $cat['status_id'];?>"><?php echo $cat['status_name'];?></option>
<?php } ?>
</select>

JS

$("#getcomplaints").change(function()
    {               
        var id = $(this).find(":selected").val();

        var toget = 'action='+ id;

        $.ajax
        ({
            url: 'getcomplaints.php',
            data: toget,
            cache: false,
            success: function(r)
            {
                $("#display").html(r);
            } 
        });
    });

getcomplaints.php

$results='<tbody>
             <tr>
             <td><?php echo $d['c_id'];?></td>
             <td><?php echo $d['s_name'];?></td>
             <td><?php echo $d['c_desc'];?></td>
             <td><?php echo $d['uname'];?></td>
             <td><?php echo $d['status_name'];?></td>
             <td><?php echo $d['c_time'];?></td>
             <td>
             <select id="more" name="option" class="form-control">
             <option>MORE</option>
             <option value="<?php echo $d['c_id']; ?>">Close</option>
             <option value="<?php echo $d['c_id']; ?>">Reply</option>
             </select>
            </td>
             </tr>
             </tbody>';

I am simply echoing $result variable. it contains a Table with all Classes and IDs.

My Try

$("#more").change(function()
    {               
        var id = $(this).find(":selected").val();
    });

So `echo $results;` in your php and this output will be caught by js-success callback. — u_mulder, Dec 17 '16 at 17:25
Possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) — Peon, Dec 17 '16 at 17:37
Yes this output is caught by js-success but still unable to apply jquery function on it — Mohiyo Deen, Dec 17 '16 at 17:37
@chris85 no it is not showing any error. My only confusion is I just want to get option value in Jquery using $("#more").change function but it is not working — Mohiyo Deen, Dec 17 '16 at 17:39
The `.change()` binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using `.on()`. From the [documentation of `.on()`](http://api.jquery.com/on/), *Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.* — Rajdeep Paul, Dec 17 '16 at 17:40
@RajdeepPaul yes I did but delegated binding is also not working — Mohiyo Deen, Dec 17 '16 at 17:42
Do `alert(id);` to see what you're getting after this statement `var id = $(this).find(":selected").val();` — Rajdeep Paul, Dec 17 '16 at 17:49
I did using chrome's console,debugging but there is no error(logical/syntax) it is very strange. — Mohiyo Deen, Dec 17 '16 at 17:53

Jquery function not working on AJAX returned Data

0 Answers0