动态添加下拉按钮：如何触发委托事件

Question

我正在使用 bootstrap 3.3.7。在我的页面上有一个 table：在 table 的一列中有一个下拉按钮。我动态地向 table 添加行，并且每一行都有一个下拉按钮。那些添加的按钮不会打开（它们依赖于一些 js 来打开并且在 DOM 就绪时不存在）。如何将事件委托添加到这些下拉列表中？我里面没问题link。即使添加它们也会起作用。但是我无法访问它们，因为我无法打开下拉菜单。

Table代码：

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

Answer 1

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

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

动态添加下拉按钮：如何触发委托事件

dropdbown button dinamically added: how to trigger delegated event

javascript

jquery

twitter-bootstrap-3