Question

我正在使用jQuery动态构建带有动态ListItem的UniformList。所有元素都在页面上正确构建和显示（使用CSS中的绝对定位）。

编辑：以下代码不是来自我的OP。它已经过编辑，纳入了以下评论中提供的建议。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <style>
            #container {
                position:relative;
                z-index:-1;
            }

            #myDisplay {
                position: absolute;
                top: 100px;
                left: 100px;
                width: 400px;
                height: 200px;
                background-color: grey;
                z-index:-1;
            }

            #position_1 {
                position: absolute;
                top: 50px;
                left: 100px;
                color: black;
                z-index:1;
            }

            #fieldList {
                // placeholder
            }
        </style>
        <script>
            function positionElement() {
                var list = $('<ul id="fieldList">');
                var firstItem = $('<li id="position_1">').text('test');

                // add item to list
                list.append(firstItem);
                list.append('</li>');
                // add more items...
                list.append('</ul>');

                // add list to div
                $('#myDisplay').append(list);

                // added classes to elements
                ('#fieldList').addClass('fieldList');
                ('#position_1').addClass('position_1');

                // add event listener to LIs
                $('ul.fieldList li').click(function(e) {
                    var $target = $(e.target);
                    if($target.is('li')) {
                        alert('test');
                    }
                }); 
            }

            $(document).ready(function() {
                positionElement();
            });
        </script>
    <head>
    <body>
        <div id="container" class="container">
            <div id="myDisplay" class="myDisplay"></div>
        </div>
    </body>
</html>

Answer 1

试试这个

$(document).on('click','ul.fieldList li',function(e) {
    var $target = $(e.target);
    if($target.is('li')) {
        alert('test');
    }
});

您的列表项是动态生成的。

Answer 2

我认为您添加<ul>和<li>元素的方式意味着您最终得到一个空<ul>，然后<li>项直接附加到{ {1}}下面。为了使#myDisplay搜索能够显示您需要的任何元素，$('ul.fieldList li')必须位于<li>父元素中。

即。你最终得到了

<ul>

当我假设你想要的是

<div id="myDisplay">
    <ul id="fieldList" class="fieldList"></ul>
    <li id="position_1" class="position_1"></li>
</div>

因此列表创建可能就是这样：

<div id="myDisplay">
    <ul id="fieldList" class="fieldList">
        <li id="position_1" class="position_1"></li>
    </ul>
</div>

Answer 3

第三行中的选择器错误。改变

$('#myDisplay').append('<li id="position_1"></li>');

到

$('#fieldList').append('<li id="position_1"></li>');

使用jQuery将onClick函数添加到ListItem

3 个答案: