javascript click event on dropdown menu

Question

an application I have four dropdwon -menu where one of these is filled by selecting an earlier ... this is filled in automatically ... does not respond to click event
I have searching by answers about creating a dinamic UL LI itens and found this:

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

also I have found a click event delegating:

    $(".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);
        }
    });

all dropdowm-menus previously defined response to click on LI, but this dropdown dinamic created don't

I'm new to javascript/Bootstrap/JQuery, I need a way to follow, I will apreciate any help. thanks

That click handler isn't delegating! It's bound once to the elements that exist on the page when it runs. — James
– James, Commented Oct 23, 2015 at 21:36
You're the one creating the elements, just add the event handler, as in a.addEventListener('click', func, false)? — adeneo
– adeneo, Commented Oct 23, 2015 at 21:37
You are not delegating click events, you are simply adding a click handler to existing <a> elements on the page. Either addEventListener to elements as you're creating them, or use this syntax for click event delegation: $(".dropdown-menu").on("click", "li a", function () { ... }) — Igor Raush
– Igor Raush, Commented Oct 23, 2015 at 21:40

James · Accepted Answer · 2015-10-23 21:41:10Z

1

Like this:

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

Read about Direct and delegated events

answered Oct 23, 2015 at 21:41

James

22.4k5 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DinoMyte · Accepted Answer · 2015-10-23 21:49:30Z

0

The issue is how you are delegating the click event. If your delegation is outside the event which is creating the dynamic elements than its not going to work. Your reference to the click event should happen in the same function where you are generating the dynamic html.

For example :

<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/

edited Oct 23, 2015 at 21:49

answered Oct 23, 2015 at 21:35

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

Collectives™ on Stack Overflow

javascript click event on dropdown menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related