Question

我有一个Html下拉列表，允许用户拥有网格的页面大小。

@Html.DropDownList("PageSizes", Model.PageSizes)

然后我有一个javascript块：

        <script type="text/javascript">
        function ChangePageSize(size, msg) {
            alert("alert inside ChangePageSize: " + msg + " " + size); //msg = from: Initial; first dropdown change (grid updates with new page size)
                                                                       //msg = from: Initial; second dropdown  change (alert pops twice, grid does not update)
            var filterPage = "/Search/Filter";
            $.ajax({
                cache: false,
                url: filterPage,
                data: { pagesize: size },
                type: 'GET',
                success: function (data) {
                alert("success" + data);                             //this alert pops twice on the second dropdown change as well, data does have html in it.
                $('#searchResults').replaceWith(data);                       
            },
                error: function () { alert('Error changing page size.'); }
            });
        }

        $(function() {
            $('body').on('change', '#PageSizes', function() {
                var size = this.value;
                if (size != 'undefined') ChangePageSize(size, "from: Initial");
            });
        });
    </script>

这只能运作一次。我也尝试过使用bind（）和live（）。有谁知道如何正确地重新加入变更事件？

更新：修改了建议的javascript并添加了一些调试警报。似乎函数再次绑定到事件，它看起来像Controller Action返回局部视图。但是为什么我的#searchResults DIV不会再次更新？为什么ChangePageSize函数被调用两次？

UPDATE2：我想出了我的网格没有填充的原因。指定要替换的DIV在更换后消失。我用一个同名的DIV在部分视图中用手指划过桌子，希望找到正确的DIV来代替。

所以现在这样做了。我仍然担心该函数被多次调用，我猜这也是多次击中服务器。为什么会这样？

Answer 1

变化

$(function() {
    $('#PageSizes').change(function () {
        var size = this.value;
        if (size != 'undefined')
            ChangePageSize(size);
    });
});

到

$(function() {
    $('body').on( "change", "PageSizes", function () {
        var size = this.value;
        if (size != 'undefined')
            ChangePageSize(size);
    });
});

这样，具有id PageSizes的所有元素将不仅具有与初始document.ready事件一起出现的事件处理程序

在MVC操作后重新绑定Ajax成功的javascript函数

1 个答案: