Question

我需要在每个父项上创建列表项和子项列表，当父项单击时，需要隐藏/显示项。下面是在li元素添加为html的情况下可以正常工作的代码。

    function add() {
      var ul = document.getElementById("locations_id");
      var li = document.createElement("li");
      li.appendChild(document.createTextNode("Element 4"));
      ul.appendChild(li);
       
    }
    
    function addLoc() {
      var loc = ["loc1","loc2","loc3"];
      var cam = ["cam1","cam2","cam3"];
    
      for(var i=0;i<loc.length;i++){
       var ul = document.getElementById("locations_id");
       var li = document.createElement("li");
       var a = document.createElement('a');
       a.appendChild(document.createTextNode(loc[i]));
       a.onclick = test(); 
       li.appendChild(a);
    
       var ul1 = document.createElement("ul");
       for(var j=0;j<cam.length;j++){
         var check = document.createElement("input");
         check.setAttribute('type','checkbox'); 
         check.setAttribute('name','cam'); 
         check.setAttribute('value',cam[j]);
         ul1.appendChild(check);
         ul1.appendChild(document.createTextNode(cam[j]));  
         ul1.appendChild(document.createElement("br"));  
       }
        li.appendChild(ul1);
        
        
        ul.appendChild(li);
      }
      
       
    }
    function test() { alert('blah'); }
    
    $('.list > li a').click(function() {
            $(this).parent().find('ul').toggle();
        });

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Test</title>
        
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript"></script>
    </head>
    
    
    <body>
     <button onclick="addLoc()">Add </button> 
    
    
    	<ul id="locations_id" class="list" style="list-style-type:none">
            <li>
                <a>Vehicle</a>
                <ul>
                  <input type="checkbox" name="vehicle" value="Bike"> Bike<br> 
     	      <input type="checkbox" name="vehicle" value="Car" > Car<br>          
                </ul>                      
            </li>
        </ul>
        </body>
    </html>

当我点击父项时，我从javascript添加的元素似乎没有显示或隐藏。

可能是什么问题。

Answer 1

问题是侦听器没有附加到新的li元素，因为它们在运行代码时不存在。在将元素添加到DOM之后，在addLoc（）函数的主体中添加.click侦听器。

Answer 2

使用事件委派。因为你是动态创造李。

MyCustomType[]

另外

为onClick添加函数名称。它不应该是

$(document).on('.list > li a','click',function() {
        $(this).parent().find('ul').toggle();
});

使用此

 a.onclick = test();

从javascript添加的li元素无法隐藏

2 个答案: