Jquery event not working after returning data from ajax

Question

This is a simple my script jquery ajax populate navigation bar like choose category and subcategory after returning of data. here fist is (static) html unordered list and second is dynamic unordered list after returning data from ajax i want to use some jquery events like there.

1: first get li text from static unordered list. it is working ok.

   $("#brands li").click(function(){
        // This is working ok
        var brand = $(this).text();
        alert(brand);

2: and second is get text from dynamic unorderd list it is not working

$("#model li").click(function(){
                var model = $(this).val();
                alert(model);
            });

(index.php page)

 <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>AJAX UL LIST</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <style>
        *{
            margin:0px;
            padding:0px;
        }
        .menu{
            border:1px solid gray;
            width:125px;
            min-height:200px;
            font-family:arial;
            float:left;
            margin-top:20px;
            margin-left:20px;
            padding:10px;
            background-color:#E6E6E6;
            box-sizing:border-box;
            border-radius:3px;
        }
        .menu ul{
            list-style:none;
        }
        .menu ul li{
            margin-bottom:10px;
            font-weight:bold;
            color:#045FB4;
            cursor:pointer;
        }
        </style>
    </head>
    <body>

    <div class="menu">
        <ul id="brands">
        <li id="brand">Toyota</li>
        <li id="brand">Suzuki</li>
        <li id="brand">Dodge</li>
        <li id="brand">Hyundai</li>
        <li id="brand">chevrolet</li>
        </ul>
    </div>

    <div class="menu">
        <ul id="model">
        </ul>
    </div>

    </body>
    </html>

    <script>
    $(document).ready(function(){

        $("#brands li").click(function(){
            // This is working ok
            var brand = $(this).text();
            alert(brand);
            //
                $.ajax({
                url:"fetch_list.php",
                method:"POST",
                data:{brandName:brand},
                dataType:"text",
                success:function(data)
                {
                    $('#model').html(data);
                }
            });
        });

        // This is not working
        $("#model li").click(function(){
                var model = $(this).val();
                alert(model);
            });
    });
    </script>

(fetch_list.php page)

    <?php
    $connect = mysqli_connect("localhost","root","","test");
    $output = '';
    $sql = "SELECT * FROM ul_li_ajax_test WHERE car_brand = '".$_POST["brandName"]."' ORDER BY car_names";
    $result = mysqli_query($connect, $sql);
    $output = '<li>Select Model</li>';
    while($row = mysqli_fetch_array($result))
    {
        $output .= '<li>'.$row["car_names"].'</li>';
        //$output .= '<li><a href=?model='.$row["car_names"].'>'.$row["car_names"].'</a></li>';
    }
    echo $ output;
?>

You can't do `$(this).val();` in a `li` element. – DontVoteMeDown Mar 22 '17 at 17:39 — DontVoteMeDown, Mar 22 '17 at 17:39

score 0 · Answer 1 · answered Mar 22 '17 at 17:46

Unfortunately, it doesn't work in this way. You are assigning a function to on click of an element while it is not available in your DOM tree. So you should assign the function after adding the elements.

var target = document.getElementById("#model");
var observer = new MutationObserver(function() {
    $("#model li").click(function(){
                var model = $(this).val();
                alert(model);
    }); 
});

// configuration of the observer:
var config = { childList: true, subtree: true};

// pass in the target node, as well as the observer config
observer.observe(target, config);

Let me know if there was any issue.

score 0 · Answer 2 · answered Mar 22 '17 at 17:54

you are building modal data i.e. html into ajax request which is async, and your click method is outside ajax. this means, your modal didn't have any html when your click event is bind and hence dom didn't detect it..

to solve simply put your click event

 // This is not working
    $("#model li").click(function(){
            var model = $(this).val();
            alert(model);
        });

into your success call i.e.

    $("#brands li").click(function(){
            // This is working ok
            var brand = $(this).text();
            alert(brand);
            //
                $.ajax({
                url:"fetch_list.php",
                method:"POST",
                data:{brandName:brand},
                dataType:"text",
                success:function(data)
                {
                    $('#model').html(data);
// Put it here...


        $("#model li").click(function(){
                var model = $(this).val();
                alert(model);
            });
                }
            });
        });

Jquery event not working after returning data from ajax

2 Answers2