Jquery on click on bootstrap dropdown

Question

I have one problem. I have next code for bootstrap dropdown:

<div class=\"pull-right\" style=\"padding-right:10px;\">
        <!-- Split button -->
        <div class=\"btn-group\">
        <button type=\"button\" id=\"dataTitle\" data-title=\"Beheer informatie over uw dier\" class=\"btn btn-success btn-xs\"><i class=\"fa fa-pencil-square-o\"></i></button>
        <button type=\"button\" id=\"dataTitle\" data-title=\"Beheer informatie over uw dier\" class=\"btn btn-success btn-xs dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">
        <span class=\"caret\" style=\"margin-top:0;\"></span>
        <span class=\"sr-only\">Toggle Dropdown</span>
        </button>
        <ul class=\"dropdown-menu\">
            <li><a id=\"dataTitle\" data-title=\"Klik hier om de informatie over uw dier te wijzigen\" href=\"#\"><i class=\"fa fa-pencil\"></i>  Wijzigen</a></li>
            <li role=\"separator\" class=\"divider\"></li>
            <li><a id=\"dataTitle btnVerwijderen-". $redPet["id"] ." linkDelete\" data-title=\"Klik hier om uw dier te verwijderen\"><i class=\"fa fa-trash\"></i>  Verwijderen</a></li>
        </ul>
        </div>
</div>

Now I want to call jquery click event to do something with ajax, but it wont work. My jquery code is :

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on("click","a#linkDelete", function(e){
            alert("Pushed");
            e.preventDefault();
        });
    });
</script>

I do not see alert window when I click on the link in dropdown menu. When I try something like

<a id=\"dataTitle btnVerwijderen-". $redPet["id"] ." linkDelete\" data-title=\"Klik hier om uw dier te verwijderen\"><i class=\"fa fa-trash\"></i>  Verwijderen</a>

in place of dropdown, then it works fine.

Any help?

DinoMyte · Accepted Answer · 2016-01-13 18:13:55Z

2

You are targeting the element with id = 'linkDelete' but that's just a text in your id ( not exact match). So you need to use a contain(*) selector.

$(document).ready(function() {
        $(document).on("click","a[id*=linkDelete]", function(e){
            alert("Pushed");
            e.preventDefault();
        });
    });

answered Jan 13, 2016 at 18:13

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

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

1 Comment

DinoMyte Over a year ago

Sure. Glad I could help :)

Collectives™ on Stack Overflow

Jquery on click on bootstrap dropdown

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related