javascript - after second ajax call all jquery codes not working -
i'm getting partial via ajax in asp.net mvc, work fine first time , second time after that, jquery codes stop working. 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 comment ' this function ' in code not work. use tipsy popup in layout, not work after second call. seems of jquery codes stop working after second call.
what problem?
try 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 code want execute.
because code run on initial element present in dom on dom ready.
after ajax new element on code doesn't run put code in function , call on dom ready , after ajax call.
Comments
Post a Comment