I can’t make a Dropdown change event work - JS and Asp.Net

Asked

Viewed 80 times

1

I have a custom Combobox and inside it a button with menus and submenus. When I click on an element of the tag (For example, an email) it should use the change event and capture the data-id content and throw it into a variable. I don’t know what I’m doing wrong, but I can’t get the event to change... I’m trying to call the dropdown id="btn-add-contact", but it doesn’t work... Can someone help me?

inserir a descrição da imagem aqui 

<div class="dropdown" style="z-index:10000; position:absolute" id="btn-add-contato">
    <button type="button" class="btn btn-primary dropdown-toggle"
            aria-expanded="true" data-toggle="dropdown">
        <i class="icon wb-plus" aria-hidden="true"></i>
        Novo Contato
    </button>
    <div class="dropdown-menu" aria-labelledby="exampleDefaultDropdownSubMenu" role="menu">
        <div class="dropdown-submenu">
            <a class="dropdown-item" href="javascript:void(0)" role="button" tabindex="-1">Telefones</a>
            <div class="dropdown-menu" role="menu">
                @foreach (var item in Model.FormasContato)
                {
                    switch (item.Value)
                    {
                        case "1":
                            <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1"><i class="icon fa-tty" aria-hidden="true" data-id="@item.Value"></i>@item.Text</a>
                            break;
                        case "2":
                            <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1"><i class="icon wb-mobile" aria-hidden="true" data-id="@item.Value"></i>@item.Text</a>
                            break;
                        case "3":
                            <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1"><i class="icon wb-print" aria-hidden="true" data-id="@item.Value"></i>@item.Text</a>
                            break;
                        case "4":
                            <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1"><i class="icon md-headset-mic" aria-hidden="true" data-id="@item.Value"></i>@item.Text</a>
                            break;
                    }
                }
            </div>
        </div>
        <div class="dropdown-divider"></div>
        <div class="dropdown-submenu">
            <a class="dropdown-item" href="javascript:void(0)" role="button" tabindex="-1">WEB</a>
            <div class="dropdown-menu" role="menu">
                @foreach (var item in Model.FormasContato)
                {
                    switch (item.Value)
                    {
                        case "5":
                            <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1"><i class="icon wb-envelope" aria-hidden="true" data-id="@item.Value"></i>@item.Text</a>
                            break;
                        case "6":
                            <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1"><i class="icon glyphicon glyphicon-globe" aria-hidden="true" data-id="@item.Value"></i>@item.Text</a>
                            break;
                        case "7":
                            <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1"><i class="icon wb-chat-group" aria-hidden="true" data-id="@item.Value"></i>@item.Text</a>
                            break;
                        case "8":
                            <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1"><i class="icon fa-users" aria-hidden="true" data-id="@item.Value"></i>@item.Text</a>
                            break;
                    }
                }
            </div>
        </div>
    </div>
</div>

JS

$(document).on('change', '#btn-add-contato', function (e) {
    alert('Disparou o evento!');
});
javascript asp.net-mvc

1 answer

0


You can do the event assignment onChange() thus:

$(document).ready(function(){
  $('#btn-add-contato').on('change', function (e) {
      alert('Disparou o evento!');
  });
})

  • Hi @Victor Laio! I think you have a problem with this dropdown, because it has a button inside it. It was not designed to save an option when clicked (ex: e-mail). I think the click event would work... I changed his suggestion, instead of "change", to "click" and it worked, but I need it to fire the click on the submenus and not on the menus (Phones and WEB)... How could I do that?

  • Then inspect the element through the browser and you will be able to see if it actually did the event assignment or even if there is a button inside it. So you’ll really get the id you need to make the change()

  • It’s... I inspected it and it really has a button inside. I don’t know if it’s a correct way, but it worked! I was referencing all the child classes until I got . dropdown-item... Thus, the click will be fired only on the items elements of each submenu menu: $('#btn-add-contact . dropdown-submenu . dropdown-menu . dropdown-item'). on('click', Function(and) {

  • Thank you @Victor Laio!

Browser other questions tagged javascript asp.net-mvc

You are not signed in. Login or sign up in order to post.