php - JQuery 效果不适用于 ajax 内容

Question

我有一个列出订单的表格，我想添加过滤结果的可能性。因此，我在 Jquery 中创建了一个选择字段和一个 onchange 效果，它将具有这些过滤结果的同一个表加载到我的 Div 中。因此，我使用 Ajax 将此“新内容”更新到我的 div。问题是，这个表有几个 JQuery 效果(例如，当您单击一行时向下滑动)，当 AjaxRequest 创建内容时，这些效果不起作用。我已经在 Stackoverflow 和其他版 block 中阅读了一些内容，但具体情况太多，我无法使用。我听说过一些关于我需要在某处调用的“init-function”的消息，因此 JQuery 的东西也适用于我的 Ajax 生成的内容。

这是我的 Ajax 请求:

$('.category').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;

    $.ajax({
        type: "POST",
        url: "includes/listorders.php",
        data: "filter=" + valueSelected,
        success: function( data ) {
            $( "#latestOrders" ).html(data);
        }
    });
});

这是我的 listorders.php 基本上返回的内容(可能不需要知道来解决我的问题):

$filter = $_POST['filter'];

//Prepare Queries
$lastOrders = "SELECT * FROM Orders ORDER BY dateAdded DESC LIMIT 0,48";
$ps_orders = $db->query($lastOrders);
$data = $ps_orders->fetchAll();

foreach($data as $row)
{
    $orderid =$row['id'];
    $username = $row['name'];
    $done = $row['refsDone'];
    $quantity = $row['quantity'];
    $running =$row['refsRunning'];
    $untouched = $quantity - ($done+$running);
    ?>
    <tr class="header mySlideToggler" data-id="<? echo $orderid ?>">
        <td class="align-center">TEST<? echo $username ?></td>
        <td>0 %</td>
        <td>22 Aug 2014</td>
        <td><? echo $done . " / " . $quantity ?></td>
        <td><? echo $running ?></td>
        <td><? echo $untouched ?></td>
        <td>
            <a href="#" class="table-icon edit" title="Edit"></a>
            <a href="#" class="table-icon expand mySlideToggler" data-id=$orderid title="Expand"></a>
            <a href="#" class="table-icon delete" title="Delete"></a>
        </td>
    </tr><tr style="padding: 0"><td colspan="7" style="padding: 0">
        <div class="accounts" style="display: none">
        </div>
    </td></tr>
    <?
}
?>

我的幻灯片效果包括另一个 Ajax 请求内容应该显示在滑动的 div 中:

// Slide effect for listing account information to an order
$('.mySlideToggler').click(function( event ){
    event.preventDefault();
    event.stopPropagation();

    var id = $(this).data('id');
    var div = $(this).closest('tr').next().find('.accounts');

    $.ajax({
        type: "POST",
        url: "includes/listaccounts.php",
        data: "orderid=" + id,
        success: function( data ) {
            div.html(data);
        }
    });
    $(this).closest('tr').next().find('.accounts').slideToggle();
});

Answer 1

您需要确保使用事件监听器的新实时版本，以处理异步加载的内容

$('body').on('click', '.my-class', function(){
    //handle click event for .my-class here
});

上面的代码并不特定于您的情况，因为您还没有发布无法处理异步内容的 js 代码。这只是您如何管理实时事件监听器的示例。

查看您的代码更新后的具体答案:

$('body').on('click', '.mySlideToggler', function(event){
    //do toggle stuff here
});

为什么？

jQuery .click 不支持在异步加载的内容上发生的事件。同样的问题适用于使用以下代码:

$('.mySlideToggler').on('click', function(event){
    //THIS WONT WORK WITH ASYNC CONTENT
});

这就是为什么 jQuery 允许我们在非异步加载的父元素上注册事件，并向 .on 提供第二个参数，告诉我们要监听该元素的哪个子元素作为目标或所说的事件。这适用于所有事件，click|change|focus|blur|etc...

为什么 $('body')

我通常将这些实时处理程序附加到 html 文档的 body 中，因为正文很少通过异步内容重新加载，因为重新加载整个内容可能需要加载新页面，但这不是必需的使用 body 。您可以附加到页面上任何静态的父元素，包括 document 或 window

很高兴知道

jQuery 以前使用的方法 .live() 现在已经被弃用了一段时间，我想是从 1.7 开始的

我建议您在此处阅读有关 .live 更改的更多信息:http://api.jquery.com/live/

我希望这已经充分回答了您的问题。如果您仍有问题，请告诉我。

性能问题

如果您使用大量此类事件，将 .on 事件的父对象尽可能靠近子元素附加将提高性能，因为 jQuery 不必遍历在 DOM 树的最深处找到子元素。

更多信息在这里:http://api.jquery.com/on/#event-performance