Question

一个应用程序我有四个dropdwon -menu，其中一个填充通过选择更早...这是自动填充...不响应点击事件
我搜索了关于创建一个dinamic UL LI itens的答案，并发现了这个：

def band(request, field):
    results = Results.objects.all()
    names = [n.name for n in results]
    types = [t.type for t in results]

    if field == 'name':
        bands = names
    else:
        bands = types

    return render(request, 'band.html', {'bands': bands, 'field_name': field})

我也找到了一个点击事件委托：

    function getModelos(response) 
    {
        var obj = JSON.parse(response);
        try
        {   
            var ul = document.getElementById("modelo");
            var modelos = obj.modelos;
            var x = document.getElementById("modelo");

            while(x.length > 0)
            {
                x.remove(0);
            }
            for(i=0;i<modelos.length;i++)
            {
                var li = document.createElement("li");
                var a = document.createElement("a");
                a.appendChild(document.createTextNode(modelos[i].modelo));
                a.setAttribute("href","#");
                a.setAttribute("data-value",modelos[i].id+",.modelo");
                li.appendChild(a);
                ul.appendChild(li);
            }
      }
      catch(err)
      {
          alert("ERRO: "+err);
      }
  }

所有dropdowm-menus先前定义的对点击LI的响应，但是这个下拉列表创建的不是

我是javascript / Bootstrap / JQuery的新手，我需要一种方法可以遵循，我会提供任何帮助。感谢

Answer 1

问题在于您如何委派点击事件。如果您的代表团不在创建动态元素的事件之外，而不是无法工作。您对click事件的引用应该在生成动态html的同一函数中发生。

例如：

<input type="button" id="btn" value="GenerateHTML"/><br/>
<div>       
</div>

$("#btn").click(function()
{
    $("div").append("<ul class='dropdown-menu'><li><a href='#'>1</a></li><a href='#'>2</a></ul>");
    $(".dropdown-menu").find("li a").click(function()
    {
        alert();
    });

});

http://jsfiddle.net/pkhout3x/

Answer 2

像这样：

$(".dropdown-menu").on("click","li a",function() {blah});

了解Direct and delegated events

下拉菜单上的javascript点击事件

2 个答案: