after second ajax call jquery not working

Question

I'm getting a partial via ajax in asp.net mvc, it work fine for first time and second time but after that, it redirect to page instad of getting page via ajax.

this is my partial page code :

<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>

i'm using pagedlist and when i change page after second time it seems all jquery commends terminated, what is problem? can anyone help me ?

EDIT : this part of code doesn't work too after second call.

<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

This is just a shot in the dark:

Get e from your click handler then try e.preventDefault(); before the return false.

Answer 2

Your #getdata-@ViewBag.term is within the #retrieve-@ViewBag.term element but that gets replaced after the first call. You need to use event delegation.

Try this instead:

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