Question

我不知道为什么当我使用Ajax在MVC4中进行分页和搜索时，但是当我搜索或点击下一页时。我看到我的页面丢失了所有效果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);
});

我希望人们可以帮助我。谢谢！

Answer 1

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

在MVC4中失去了JQuery效果

1 个答案: