after second ajax call all jquery codes 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, all jquery codes stop working. this is my code :

<script>

    var jqgd = jQuery.noConflict();
    jqgd(function () {
        jqgd('#getdata-@ViewBag.term').on('click', '#getdata-@ViewBag.term 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'> //This function
    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>

part of code that i comment as ' This function ' in code does not work. also I use tipsy popup in my layout, it does not work after second call. it seems all of my jquery codes stop working after second call.

what is problem?

Answer 1

try something like this

    <script>
        var jqgd = jQuery.noConflict();
        jqgd(function () {
            jqgd('#getdata-@ViewBag.term').on('click', '#getdata-@ViewBag.term 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);
                        init();
                    }
                });
                return false;
            });
        });
    </script>

    <script type='text/javascript'> //This function
        function isEnglish() {
            return $(this).text().charCodeAt(0) < 255;
        }

        function isPersian() {
            return $(this).text().charCodeAt(0) > 255;
        }
        function init(){
         $("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');
            });

        }
        jQuery(function ($) {
            init();
        });
    </script>

Simply make function of your code that you want to execute.

Because your code run on initial element which are present in DOM on DOM ready.

After ajax you get new element on which code doesn't run so put your code in function and call it on DOM ready and after your ajax call.