点击下拉菜单上的事件

javascript click event on dropdown menu

本文关键字：事件 下拉菜单      更新时间：2023-09-26

应用程序我有四个下拉菜单，其中一个是通过选择较早的…这是自动填写的……不响应点击事件
我搜索了关于创建动态UL LI项的答案，发现如下:

    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);
      }
  }

我也发现了一个点击事件委托:

    $(".dropdown-menu li a").click(function()
    {
        var selText = $(this).text();
        $(this).parents('.dropdown').find('.dropdown-toggle').html(selText+'                             <span class="caret"></span>');
        var valor = $(this).data('value');
        var options = valor.split(",");
        $(this).parents(".dropdown").find(options[1]).val(options[0]);
        if(options[1] == ".marca")
        {
            pedeModelos(selText);
        }
    });

所有先前定义的下拉菜单响应单击LI，但是这个下拉菜单动态创建不

我是新的javascript/Bootstrap/JQuery，我需要一种方式来遵循，我会感谢任何帮助。由于

像这样:

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

了解直接事件和委托事件

问题是你如何委派点击事件。如果你的委托在创建动态元素的事件之外，那么它将无法工作。对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/

相关文章：