0

我不知道为什么当我在MVC4中使用Ajax进行分页和搜索时，但是当我搜索或点击到下一页时。我看到我的页面丢失了 Jquery 的所有效果。

这是我的 JavaScript 代码：

$(function () {
$(".listview > li").hover(function () {
    $(this).children(".badge.right").css({ "display": "block", "animation": "myanomation 0.5s" });
},
function () {
    $(this).children(".badge.right").css({ "display": "none" });
});

var ajaxFormSubmit = function () {
    var $form = $(this);
    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-ms-target"));
        $target.replaceWith(data);
    });

    return false;
};

//var submitAutoCompleteForm = function (event, ui) {
//    var $input = $(this);
//    $input.val(ui.item.name);

//    var $form = $input.parents("form:first");
//    $form.submit();

//    return false;
//};

var createAutocomplete = function () {
    var $input = $(this);

    var options = {
        minLength: 1,
        source: $input.attr("data-ms-autocomplete")
    }

    $input.autocomplete(options)
          .data("ui-autocomplete")._renderItem = function (ul, item) {
              return $("<li></li>")
                .data("item.ui-autocomplete", item)
                .append("<a href='/Product/Details/" + item.id + "'><div class='icon'><img src='/Uploads/Images/Products/" + item.icon + "' /></div><div class='data'><h4>" + item.name + "</h4><div class='static-rating small' data-role='rating' data-param-vote='off' data-param-rating='" + item.rating + "'><div class='rating-value' style='width: " + (item.rating / 5) * 100 + "%;'></div></div></div><p>$ " + item.price + "</p></div></a>")
                .appendTo(ul);
          };

    return false;
};

var getPage = function () {
    $a = $(this);

    var options = {
        url: $a.attr("href"),
        type: "get"
    }

    $.ajax(options).done(function (data) {
        var target = $a.parents("div.pagedList").attr("data-ms-target");
        $(target).replaceWith(data);
    });

    return false;
};

$("form[data-ms-ajax='true']").submit(ajaxFormSubmit);
$("input[data-ms-autocomplete]").each(createAutocomplete);
$(".main-content").on("click", ".pagedList a[href]", getPage);
});

我希望人们能帮助我。谢谢！

4

1 回答 1

0

您的 Ajax 提交正在替换 div 中的所有元素，如果某些 jQuery“效果”需要绑定到元素，那么他们将不知道新添加的 DOM 元素。如果是这种情况，那么您的 jQuery“效果”将需要添加到新元素中。

于 2013-05-31T13:31:18.573 回答