在第二个 ajax 调用 jquery 后不起作用

Question

我在 asp.net mvc 中通过 ajax 获得了部分内容，它第一次和第二次都可以正常工作，但之后，它会重定向到通过 ajax 获取页面的页面。

这是我的部分页面代码：

<script>

    var jqgd = jQuery.noConflict();
    jqgd(function () {
        jqgd('#getdata-@ViewBag.term').on('click', 'a', function () {
            if (this.href == "") { return; }
            jqgd.ajax({
                url: this.href,
                type: 'GET',
                cache: false,
                success: function (result) {
                    alert(result);
                    jqgd('#retrieve-@ViewBag.term').html(result);
                }
            });
            return false;
        });
    });
</script>

<script type='text/javascript'> // Added
    jQuery(function ($) {

        $("div, p, a, b, strong, bold, font, span, td")
        .filter(function () {
            return $(this).children(":not(.word)").length == 0
        })
        .each(function () {
            this.innerHTML = $(this).text().replace(/\S+/g, function (word) {
                return "<span class='word'>" + word + "</span>";
            });

            $(".word", this).filter(isEnglish).addClass('english');
            $(".word", this).filter(isPersian).addClass('persian');
        });

        function isEnglish() {
            return $(this).text().charCodeAt(0) < 255;
        }

        function isPersian() {
            return $(this).text().charCodeAt(0) > 255;
        }
    });
</script>

<div id="retrieve-@ViewBag.term">
    <div style="float:right;">
        <div class="searchtitles" style="float: right;">@ViewBag.term</div>
        <table class="jjt" cellpadding="0" cellspacing="0">
            <tr class="j2t">
                <td class="j13t">field</td>
                <td class="j13t">field</td>
                <td class="j13t">field</td>
                <td class="j13t">field</td>
                <td class="j13t">field</td>
                <td class="j13t">field</td>
                <td class="j13t">field</td>
            </tr>
            @foreach (var item in ViewBag.Terms)
            {
                Mydata 
            }


        </table>

        <div id="getdata-@ViewBag.term" style="float:left; direction:ltr; margin-left:-20px; margin-top:-15px;">@Html.PagedListPager((IPagedList)ViewBag.Tours, page => Url.Action("results", new { page }))</div>
    </div>
</div>

我正在使用 pagedlist，当我第二次更改页面时，似乎所有 jquery 推荐都终止了，有什么问题？ 谁能帮帮我？

编辑：这部分代码在第二次调用后也不起作用。

<script type='text/javascript'> // Added
        jQuery(function ($) {

            $("div, p, a, b, strong, bold, font, span, td")
            .filter(function () {
                return $(this).children(":not(.word)").length == 0
            })
            .each(function () {
                this.innerHTML = $(this).text().replace(/\S+/g, function (word) {
                    return "<span class='word'>" + word + "</span>";
                });

                $(".word", this).filter(isEnglish).addClass('english');
                $(".word", this).filter(isPersian).addClass('persian');
            });

            function isEnglish() {
                return $(this).text().charCodeAt(0) < 255;
            }

            function isPersian() {
                return $(this).text().charCodeAt(0) > 255;
            }
        });
    </script>

Answer 1

您的 #getdata-@ViewBag.term 位于 #retrieve-@ViewBag.term 元素内，但在第一次调用后会被替换。您需要使用事件委托。

试试这个：

jqgd('#retrieve-@ViewBag.term').on('click', '#getdata-@ViewBag.term a', function () {
    ...
}

Answer 2

这只是在黑暗中拍摄：

从您的点击处理程序中获取 e 然后尝试 e.preventDefault();在返回 false 之前。