jQuery Частичный просмотр Ajax только один раз

У меня есть страница asp.net, которая возвращает частичный вид на вкладке, в которой я сейчас выполняю свою работу. У меня есть настроенный jQuery, и он работает. Он работает один раз и через ajax возвращает частичный вид .html(result);jQuery Частичный просмотр Ajax только один раз

Однако это работает только один раз. Я нажимаю кнопку, она делает все за кулисами, как должно, она заменяет html, как и следовало бы. Затем, когда я снова нажимаю кнопку, ничего похожего на jQuery для этих кнопок больше нет. Нет перезагрузки страницы, все это делается через ajax.

HTML, который используется, когда страница загружена первой, а HTML, возвращаемый через .html (результат), является тем же самым html-равным частичным представлением для обоих.

Является ли мой jQuery каким-то образом отключенным при возврате этого частичного представления?

Вот мой Ajax вызов:

function updateSort(object) { 
    jQuery.ajax({ 
     url: "/MasterList/UpdateSort", 
     type: "get", 
     data: object, //if you need to post Model data, use this 
     success: function (result) { 
      //alert('success'); 
      //console.log(result); 
      jQuery("#procedures").html(result); 
     } 
    }); 
}

Вот щелчок кнопки:

jQuery(".btnMoveUp").click(function() { 
     var $this = jQuery(this), 
      processID = $this.data('processid'), 
      currProcedureID = $this.data('procedureid'), 
      currSortOrder = $this.data('sortorder'), 
      idx = jQuery('.commentlist li').index($this.closest('li')), 
      $prevLi = jQuery('.commentlist li').eq(idx - 1), 
      $anchor = $prevLi.find('.btnContainer a'), 
      prevProcedureID = $anchor.data('procedureid'), 
      prevSortOrder = $anchor.data('sortorder'); 

     // create object that we can pass to MVC controller 
     var objProcedure = {}; 

     objProcedure = { 
      _processID: processID, 
      _currProcedureID: currProcedureID, 
      _currSortOrder: currSortOrder, 
      _switchProcedureID: prevProcedureID, 
      _switchSortOrder: prevSortOrder 
     } 

     updateSort(objProcedure); 

    });

Почему это будет работать только один раз?

источник

2013-09-12 James Wilson

Если элементы с обработчиками событий, связанных с ними в HTML, который заменяется, то да, вы потеряете эти привязки. Либо переустановите после загрузки нового html, либо используйте делегирование событий. –

Я предполагаю, что вы заменяете элементы новыми элементами, и даже если разметка точно такая же, элементов нет, а обработчики событий будут потеряны. Что вам нужно - это делегирование событий. – adeneo

@adeneo да весь div заменяется на новые результаты с частичного представления. –

Вы должны использовать делегированный обработчик события, например, так:

$('#procedures').on('click', '.btnMoveUp', function() { 
    var $this = jQuery(this), 
     processID = $this.data('processid'), 
     currProcedureID = $this.data('procedureid'), 
     currSortOrder = $this.data('sortorder'), 
     idx = jQuery('.commentlist li').index($this.closest('li')), 
     $prevLi = jQuery('.commentlist li').eq(idx - 1), 
     $anchor = $prevLi.find('.btnContainer a'), 
     prevProcedureID = $anchor.data('procedureid'), 
     prevSortOrder = $anchor.data('sortorder'); 

    // create object that we can pass to MVC controller 
    var objProcedure = {}; 

    objProcedure = { 
     _processID: processID, 
     _currProcedureID: currProcedureID, 
     _currSortOrder: currSortOrder, 
     _switchProcedureID: prevProcedureID, 
     _switchSortOrder: prevSortOrder 
    } 

    updateSort(objProcedure); 
});

источник

2013-09-12 16:19:02 adeneo

собирается сделать это, спасибо! –

Я изменил его на этот метод, и он работает как шарм. Я верю вам, но вы могли бы объяснить, почему этот метод лучше, чем метод функции, чтобы я мог лучше понять его? Еще раз спасибо. –

Это прикрепляет обработчик события один раз на pageload. Присоединение одного и того же обработчика событий при каждом вызове ajax может потенциально привести к проблемам, например, обработчик события как-то привязан дважды, если все элементы по какой-то причине не были заменены и т. Д. – adeneo

У меня была аналогичная проблема, и это было потому, что ответ был кеширован. Вы можете установить атрибуты jQuery ajax для кеширования в false.

$.ajaxSetup({ cache: false });

источник

2013-09-12 15:44:22 BenM

Это не исправляло это печально, но я думаю, что это исправит еще одну проблему, с которой я сталкивался с кешированием. :) –

Ahh , я рад, что смогу помочь хотя бы немного. – BenM

это будет работать, но я считаю, что он отключит все кеширование ajax, а не просто кеширование для этого обновления. Вы также можете отключить кэширование только для одной команды с помощью $ .ajax ({url: "myurl", success: myCallback, cache: false}), см. Http://stackoverflow.com/questions/7750447/difference- между-ajaxcachefalse-and-ajaxsetupcachefalse-in-jqu – tomRedox

Используйте атрибут вашего действия [OutputCache], чтобы избежать кэширования.

[OutputCache(Duration = 0)]

источник

2013-09-12 15:48:19

jQuery Частичный просмотр Ajax только один раз

ответ

Смежные вопросы