0

更新：質問を確認したところ、意味がないと完全にわかりました。疲れているときはここで質問するべきではありません。現在、書き直されており、可能な解決策があります

これが私がしたいことです：

  1. ユーザーがクラスのチェックボックスをクリックするとfilter_products、AJAX 呼び出しが行われます。
  2. 製品の更新されたリストが返されます。
  3. 更新された製品リストはUL、クラスのコンテンツを置き換えます更新product_list 後product_list、hoverintent イベントを再バインドする必要があります

コード：

<div id="sidebar">
    <input class="filter_products" type="checkbox" name="product_options[1]" value="1">
    <input class="filter_products" type="checkbox" name="product_options[2]" value="2">
</div>

<div id="main">
    <ul id="product_list">
        <li class="product">
            Product name 1
        </li>
        <li class="product">
            Product name 2
        </li>
    <ul>
</div>

<script>
    // Filter products
    $('.filter_products').on('click', function () {
        var inputs = $("input:checked");
        $.post('/filter_products/' + $('#cat_id').data('cat-id'), inputs.serialize(), function(data) {
            $('#product_list').html(data);
        });
    });

    // Hover product is now wrapped in a function
    $(".product").hoverIntent({over: getAttributtes, out: hideAttributtes});

    function getAttributtes() {
        // Do something
    }

    function hideAttributtes() {
        // Do something
    }
</script>

これはおそらく解決策です：

// Filter products
$('.filter_products').on('click', function () {
    var inputs = $("input:checked");
    $.post('/filter_products/' + $('#cat_id').data('cat-id'), inputs.serialize(), function(data) {
        $('#product_list').html(data);

        // Re-initialize hoverintent
        hoverAttributtes();
    });
});

// Hover product
function hoverAttributtes() {
    $(".product").hoverIntent({over: getAttributtes, out: hideAttributtes});
}

function getAttributtes() {
    // Do something
}

function hideAttributtes() {
    // Do something
}

// Initialize hoverintent
hoverAttributtes();
4

1 に答える 1

0

このクリックを ajax 呼び出しの後に使用する場合は、このコードを ajax 呼び出しで更新される div の外に置いてください。つまり、ajax 更新以外のメイン ページです。クリックするためにこのスクリプトを使用します。

    $(document).on('click','.filter_products', function () {
    var inputs = $("input:checked");
    $.post('/filter_products/' + $('#cat_id').data('cat-id'), inputs.serialize(), function(data) {
        $('#product_list').html(data);
    });
});
于 2013-04-06T01:16:38.293 に答える