0 
<body>
<ul><li onClick="myFunction(this.id)" id="root">Root</li></ul>

<script>
function myFunction(myid) //id of clicked li 
{

    var id=prompt("Enter Folder id");
    if (id != '' && id != null)
    {
        var val=prompt("Enter Folder name");
    }

    if (id != '' && id != null && val !='' && val !=null) 
    {

        var ulnode=document.createElement("UL"); //new ul
        var node=document.createElement("LI"); //new li
            node.setAttribute("id",id);//set id of new li 
            node.setAttribute("onclick","myFunction(this.id)");//set onclick event of new li 
        var textnode=document.createTextNode(val);//li value
        node.appendChild(textnode);// new li + li value
        ulnode.appendChild(node);// new li + li value

        document.getElementById(myid).appendChild(ulnode);//old+new
    }

}
</script>

</body>
4

4 回答 4

1

您正在动态添加<li>可能获得相同 ID 的元素。如果是这种情况，则不允许这样做。尝试改用类，使用 JQuery 将对您有所帮助。将代码（至少在您这边；））缩短到最低限度。

以此为起点： http: //plnkr.co/1apBvS

另外，我会将按钮分开放置在静态位置，因此即使您<ul>滚动了它，您也将始终看到它，因为它可以获得很多行。

于 2013-11-12T22:54:41.307 回答
1

添加子元素后，您将拥有如下内容：

<ul>
    <li onClick="myFunction(this.id)" id="root">
        Root
        <ul>
            <li onClick="myFunction(this.id)" id="abc">
                Abc
            </li>
        </ul>
    </li>
</ul>

既然abc是 的孩子root，点击abc 也点击root。有时你想要这种行为，但不是你的情况。.stopPropagation()您可以通过调用事件对象上的方法来阻止事件“传播”到父元素。事件对象作为参数传递给事件处理程序。

当您使用 HTML 属性绑定事件处理程序时，属性值将成为处理程序函数体，并且事件参数命名为event. 您可以调用event.stopPropagation()事件处理程序，也可以将事件对象传递给myFunction(). 就个人而言，我会自己制作myFunction()处理程序（而不仅仅是处理程序调用的函数）。更改函数以接受事件对象作为它的参数。当您创建 child<li>时，而不是设置onclick属性，设置onclick属性并将其分配给myFunction.

function myFunction(e)
{
    e.stopPropagation();

    var id=prompt("Enter Folder id");
    if (id != '' && id != null)
    {
        var val=prompt("Enter Folder name");
    }
    if (id != '' && id != null && val !='' && val !=null) 
    {
        var ulnode=document.createElement("UL"); //new ul
        var node=document.createElement("LI"); //new li
        node.id = id;//set id of new li 
        node.onclick = myFunction;//set onclick event of new li 

        var textnode=document.createTextNode(val);//li value
        node.appendChild(textnode);// new li + li value
        ulnode.appendChild(node);// new li + li value

        this.appendChild(ulnode);
    }
}

这适用于动态创建的列表元素。要将该函数绑定到 HTML 中的根元素，请使用myFunction.call(this, event)：

<ul><li onClick="myFunction.call(this, event)" id="root">Root</li></ul>

演示

请注意，这种技术的一个好处是您可以<li>在函数中引用元素，因此您不需要通过 id 查找元素。如果这是您为每个列表项添加 id 的唯一原因，您可以完全省略它。生成的函数要短得多：

function myFunction(e)
{
    e.stopPropagation();
    var val=prompt("Enter Folder name");
    if (val) 
    {
        var ulnode=document.createElement("UL"); //new ul
        var node=document.createElement("LI"); //new li
        node.onclick = myFunction;//set onclick event of new li 
        node.textContent = val;
        ulnode.appendChild(node);// new li + li value
        this.appendChild(ulnode);
    }
}

演示

于 2013-11-12T22:59:13.273 回答
0

像单击这样的事件通过所有父级使 DOM 冒泡（传播）

因为您正在嵌套一个具有相同单击处理程序的父级的子级，所以该事件首先myFunction在子级上触发，然后在父级上触发。

您可以返回false以myFunction防止冒泡

于 2013-11-12T22:37:50.907 回答
0

尝试将文本包装在 a<a></a>中，例如：

<ul>
  <li><a onclick="return test()">child</a></li>
</ul>

看到这个jsfiddle：http: //jsfiddle.net/gongzhitaao/k4UEE/3/

我刚试过，但我不知道为什么<li>withonclick不起作用。

于 2013-11-12T22:50:59.450 回答