Question

这是一个简单的我的脚本jquery ajax填充导航栏，如返回数据后选择类别和子类别。这里的拳头是（静态）html无序列表，第二个是从ajax返回数据后的动态无序列表我想使用像那里的一些jquery事件。

1：首先从静态无序列表中获取li文本。它工作正常。

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

2：第二个是从动态无序列表中获取文本它无法正常工作

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

（index.php页面）

 <!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页面）

    <?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;
?>

Answer 1

不幸的是，它并没有以这种方式运作。您正在为元素点击时分配一个函数，而它在DOM树中不可用。所以你应该在添加元素后分配函数。

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);

如果有任何问题，请告诉我。

Answer 2

您正在构建模态数据，即将html转换为异步的ajax请求，并且您的click方法位于ajax之外。这意味着，当你的点击事件被绑定时你的模态没有任何html，因此dom没有检测到它..

解决简单点击事件

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

进入你的成功电话，即

    $("#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);
            });
                }
            });
        });

从ajax

2 个答案: