php - 当链接注入(inject) 时， Bootstrap 确认模式不起作用

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>

现在的情况是:搜索结果被注入(inject)到 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 属性与搜索结果一起注入(inject)时它不起作用，例如:

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

解决方案:

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