注入链接时，Bootstrap confirm-modal不起作用

Question

我有一些客户的mysql表，我有Jquery（实时）搜索来搜索该表。找到客户后，您可以删除或编辑它，如下所示：

但是当我点击删除按钮时，我想要一个确认对话框。 我找到了这段代码：

    $(document).ready(function() {
    $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');

        if (!$('#dataConfirmModal').length) {
            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h3 id="dataConfirmLabel">Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><a class="btn btn-danger" id="dataConfirmOK">Yes</a><button class="btn" data-dismiss="modal" aria-hidden="true">No</button></div></div>');
        } 
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
});

模态看起来像这样：

当我这样做时，这非常有效：

<a href="#" data-confirm="Are you sure?">Delete</a>

现在的问题是：搜索结果将在html表中注入，如下所示：

<tbody id="customers"></tbody>

我从mysql表中提取数据如下：

     while ( $row = mysql_fetch_object( $fetch ) ) {
        $sResults .= '<tr id="'. $row->customer_id . '">';
        $sResults .= '<td>' . $row->klantcode . '</td>';
        $sResults .= '<td>' . $row->naam . '</td>';
        $sResults .= '<td>' . $row->adres . '</td>';
        $sResults .= '<td>' . $row->plaats . '</td>';
        $sResults .= '<td><a href=index.php?actie=klantbewerken&klant=' . $row->klantcode . '><img class="del" src="../includes/img/edit.png"/></td>';
        $sResults .= '<td><a href=index.php?actie=verwijderen&klant=' . $row->klantcode . ' data-confirm="Are you sure?"><img class="del" src="../includes/img/delete.png"/></td>';
        $sResults .= '</tr>';
    } 

}
echo $sResults;

和jquery：

$(document).ready(function(){

    $('#customers').html('<p>Search for a customer.</p>');
    $('#customersearch').keyup(function() {
        var searchVal = $(this).val();

        if(searchVal !== '') {
       $.get('../administration/page/customers/customersearch.php?klant='+searchVal, function(returnData) {

                if (!returnData) {
                    $('#customers').html('<p>No customers found.</p>');
                } else {
                    $('#customers').html(returnData);                        
                }  

            });
        } else {
            $('#customers').html('<p>Search...</p>');
        }
    });
});

所以问题是：为什么我这样做时会得到确认模式：

<a href="#" data-confirm="Are you sure?">Delete</a> 

以及为data-confirm属性注入搜索结果时无效的原因：

$sResults .= '<td><a href=index.php?actie=verwijderen&klant=' . $row->klantcode . ' data-confirm="Are you sure?"><img class="del" src="../includes/img/delete.png"/></td>';

Answer 1

旧代码：

 $(document).ready(function() {
    $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');

        if (!$('#dataConfirmModal').length) {
            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h3 id="dataConfirmLabel">Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><a class="btn btn-danger" id="dataConfirmOK">Yes</a><button class="btn" data-dismiss="modal" aria-hidden="true">No</button></div></div>');
        } 
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
});

<强> SOLUTION：

$(document).ready(function() {
    $('body').on('click', 'a[data-confirm]', function(ev) {
        var href = $(this).attr('href');

        if (!$('#dataConfirmModal').length) {
            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h3 id="dataConfirmLabel">Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><a class="btn btn-danger" id="dataConfirmOK">Yes</a><button class="btn" data-dismiss="modal" aria-hidden="true">No</button></div></div>');
        } 
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
});