时间戳

首页 > 解决方案 > dropdbown 按钮动态添加：如何触发委托事件

javascript - dropdbown 按钮动态添加：如何触发委托事件

问题描述

我正在使用引导程序 3.3.7。在一个页面上，我有一个表格：表格的一列中有一个下拉按钮。我正在动态地向该表添加行，并且这些行中的每一行都带有一个下拉按钮。那些添加的按钮不会打开（它们依赖于一些 js 来打开并且在 DOM 上没有准备好）。如何将事件委托添加到这些下拉列表中？我对内部链接没有任何问题。即使添加它们也会起作用。但我无法访问它们，因为我无法打开下拉菜单。

表代码：

<tr>
    <td class="col-md-1">
        <i class="fa fa-unlock" aria-hidden="true" data-toggle="tooltip" data-placement="auto" title="Questo form &egrave; pubblico"></i>
    </td>
    <td class="col-md-9">ospiti del B&B</td>
    <td class="col-md-2">
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Gestisci form <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#" data-value="TorTjWzAe4iZPV0B" class="compila"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Compila</a></li>
                <li><a href="#" data-value="7" class="autore"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contatta autore</a></li>
                <li><a href="#" data-value="7" data-role="formdacompilare" class="bug"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span> Segnala un problema</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#" data-value="7" class="link-get"><span class="glyphicon glyphicon-link" aria-hidden="true"></span> Link Form</a></li>
            </ul>
        </div>
    </td>
</tr>

将添加行的 JS：

$('#add_form_pubblico').click(function(){
        bootbox.prompt({
            title: "Inserisci l'url del form pubblico che vuoi aggiungere", 
            centerVertical: true,
            callback: function(result){ 
                if(result){
                    var public_token = result.replace("form.php?token=", ""); 
                    $.ajax({
                        url: "put_public_token.php",
                        method: 'post',
                        dataType: 'json',
                        data: {public_token: public_token}
                    }).done(function(data){
                        bootbox.alert({
                            message: data.messaggio,
                            backdrop: true
                        }); 
                        $("#da_compilare tbody").append(data.html);
                    });                    
                }
            }
        });
    });

标签： javascriptjquerytwitter-bootstrap-3

解决方案

$('#add_form_pubblico').on('click', '.dropdown-menu a', function(e) {
    var el = $(e.currentTarget); // Link that was clicked.
    // ....
});

这是如果我假设 '#add_form_pubblico' 是页面加载时存在的父元素的 id（它不在您的 HTML 中）。用你拥有的任何元素替换它，甚至 $('document')

推荐阅读