Обновление частичного представления не выполняется повторно jquery

Question

Я ранее читал this, но все же он не работает в моей ситуации.

Когда мой частичный просмотр перезагружается, jquery, вложенный в частичный вид, больше не работает.

Я звоню Аякс через:

$('#refreshPage').click(function() { 
      $('#tabMain-6').html(""); 
      $.get('@Url.Action("Index", "Allocations")', function (data) { 
       // alert(data); 
       $("#tabMain-6").html(data); 
      }); 
     }); 

От нажатия кнопки моей 'refeshPage'.

У меня есть другие Jquery на моей странице, но как только это Аякс запускается, то JQuery в моем частичном виде больше не рады «перекладка»

я использовал

$(document).ready(function() { 

в моем частичном view, и все же javascript/jquery не будет запущен?

Все мои скрипты вложены в эти блоки .ready, поэтому я не уверен, почему он здесь не работает.

любые идеи?

Answer 1

Это вопрос, который был задан тысячу раз на jQuery. Я понимаю, почему, потому что это не особенно интуитивно.

Давайте проверим, что вы делаете.

Во-первых, вы загружаете HTML-файл. Ваш браузер превращает ваш HTML в структуру DOM с деревом элементов и другими узлами.

Затем вы запускаете Javascript/jQuery. Это связывает обработчики событий с вашими элементами. Например, он может привязать функцию, которая выполняется в событии click, к элементу a. Важно отметить, что вы сначала выбираете коллекцию элементов, а затем привязываете к ним функцию.

$('a').click(function() { 
    console.log('a link was clicked'); 
}); 

Это первый находит все a элементы, которые существуют в настоящее время, а затем связывает функцию к ним. Обратите внимание, что «в настоящее время существует».

Затем вы перезагружаете свой HTML. Теперь вы заменяете старые элементы, с которыми связаны обработчики событий, с новыми элементами. Они не связаны с обработчиками событий, потому что элементы не существовали при запуске Javascript.

Так в чем же решение? Ну, одним из вариантов будет запуск кода привязки событий каждый раз при изменении содержимого страницы. Это, вероятно, будет работать, но это громоздко и неэффективно, особенно на сложных страницах. Лучший вариант - использовать что-то, называемое событие делегирования. Это использует функцию Javascript под названием «bubbling»: когда событие запускается над элементом, все элементы-предки также уведомляются об этом событии. Итак, в нашем примере элемент div, который содержит элемент a, также будет проинформирован об щелчке по элементу a.

Таким образом, мы можем связать наш обработчик событий с элементом-предком элементов, которые мы заменяем. Поэтому мы привязываем обработчик click к #tabMain-6, возможно, в ваш вопрос. Этот элемент не заменяется, поэтому обработчик событий останется.(Часто люди используют элемент document, потому что он никогда не заменяется, но лучше использовать элемент как можно ближе к месту возникновения события.) Затем мы можем проверить это событие, чтобы узнать, возник ли он на элементе, который соответствует селектор.

Вы можете сделать все это самостоятельно, но jQuery упрощает работу с функцией on.

$('#tabMain-6').on('click', 'a', function() { 
    alert('a link inside #tabMain-6 was clicked'); 
}); 

Это будет продолжать работать независимо от того, сколько раз заменяется содержание #tabMain-6. Первый аргумент - тип события; третий аргумент - это функция обработчика событий. Второй аргумент является решающим: это селектор, который проверяет элемент, в котором событие возникло в этот момент.

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