jq动态创建标签元素

米奇1990

发布于
2018-09-11

更新于
2018-09-12

    #bbox{
        position: absolute;
        top: 166px;
        left: 219px;
        background: #fff;
        width: 548px;
        border: 1px solid #999;
    }
    #bbox #seach-ul{
        list-style: none;
    }
    #bbox #seach-ul li{
        height: 50px;
        line-height: 30px;
        padding-left: 10px;
    }
    #bbox #seach-ul li:hover{
        background: #e5e5e5;
        text-decoration: underline;
    }
    //body
    <div id="bbox" style="display: none;">
        <ul id="seach-ul">
        </ul>
    </div>
    //script
    $('#txt').on('keyup', function (e) {
        var text = $('#txt').val();
        var html = '';
        html += '<li>' + text + '</li>'
        $('#seach-ul').html(html);
        $('#bbox').show();

    });

为什么动态添加完li之后，先前的设置的样式不见了

javascript 前端工程师 jquery

阅读 3.2k

3 个回答

得票最新

frontoldman

4.5k2220

发布于
2018-09-12

样式都在的，你的代码没有问题。

你看下样式是不是没有生效，或者没有正确的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
         #bbox{
        position: absolute;
        top: 166px;
        left: 219px;
        background: #fff;
        width: 548px;
        border: 1px solid #999;
    }
    #bbox #seach-ul{
        list-style: none;
    }
    #bbox #seach-ul li{
        height: 50px;
        line-height: 30px;
        padding-left: 10px;
    }
    #bbox #seach-ul li:hover{
        background: #e5e5e5;
        text-decoration: underline;
    }
    </style>
</head>
<body>
<div id="bbox" style="display: none;">
        <ul id="seach-ul">
        </ul>
    </div>

    <input type="text" id="txt" name="">
    
    <script type="text/javascript">
         $('#txt').on('keyup', function (e) {
        var text = $('#txt').val();
        var html = '';
        html += '<li>' + text + '</li>'
        $('#seach-ul').html(html);
        $('#bbox').show();

    });
    </script>
</body>
</html>

linong

29.2k1266132

发布于
2018-09-12

样式是生效了呀。测试地址。
emmmm还有一种情况，就是你用打包的形式。打进去的css。有可能带有其他标识。比如vue的css模块。