Question

<div id="header2">
    <ul id="boards"></ul>
</div>

最初我有一个空的无序列表。单击按钮后，将使用javascript添加动态生成的包含html代码的列表项。

<script>
$("#header2 ul").append('<li id="b'+i+'"> <a id="back" class="button" href="#" style="float:right;">Back</a><a id="data_link" class="button" href="#" style="float:right;">Data</a> \n <a id="board_link" class="button" href="#" style="float:right;">Board</a>\n <h1>Kanban Board</h1>\n <div id="output"></div> \n <div class="clear"></div> \n<textarea id="data_output" rows="20" cols="100"> </textarea></li>');

$("#header2").hide();
$("#header ul").on('click', function (){
    $("#"+this.id).show();
});

</script>

现在，我只想从列表中选择一个项目，这样它只会显示它所拥有的代码块，但show（）函数不能用于动态生成的列表。请帮帮我谢谢。

这是代码

<h1>Kanban Boards</h1>

<button onclick="myFunction()">Add Board</button>

<div id="header">
    <ul id="tabs"></ul>
</div>
<div id="header2">
    <ul id="boards"></ul>
</div>

<script>
var i=0;
function myFunction()
{
    var x;

    var person=prompt("Please enter board name","My Kanban");

    if (person!=null){
        x=person;
        $("#header ul").append('<li id="'+i+'" onclick="alert("hello")"><a class="button" href="#">'+x+'</a> </li>');
        $("#header2 ul").append('<li id="b'+i+'"> <a id="back" class="button" href="#" style="float:right;">Back</a><a id="data_link" class="button" href="#" style="float:right;">Data</a> \n <a id="board_link" class="button" href="#" style="float:right;">Board</a>\n <h1>Kanban Board</h1>\n <div id="output"></div> \n <div class="clear"></div> \n<textarea id="data_output" rows="20" cols="100"> </textarea></li>');
        i++;
    }
}
$("#header2").hide();
$("#header ul").on('click', function (){
    $("#"+this.id).show();
});


</script>

Answer 1

您无法点击隐藏的元素。你隐藏了#header2但是却试图点击它内部的ul，它会与div一起隐藏。

show（）函数不适用于动态生成的列表项

1 个答案: