Question

我有一个问题。我有下一个引导程序下拉代码：

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

现在我想调用jquery click事件来执行ajax，但它不会工作。我的jquery代码是：

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

单击下拉菜单中的链接时，我看不到警告窗口。当我尝试像

这样的东西时

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

代替下拉列表，然后就可以了。

任何帮助？

Answer 1

您定位的是id ='linkDelete'的元素，但这只是您ID中的文字（不完全匹配）。因此，您需要使用contain(*)选择器。

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

Jquery点击bootstrap下拉列表

1 个答案: