MVC частичное представление jQuery datepicker, удаляющее предыдущие средства выбора даты

Question

У меня есть страница, на которой я пытаюсь добавить дочерние элементы в родительский объект.

На этой странице есть ссылка «Добавить дочернюю», которая вызывает ajax get, возвращая частичное представление стекстовые поля для ребенка.В результате я делаю функцию для добавления результатов к innerHTML элемента div.

В частичном представлении у меня есть текстовое поле для даты рождения, названное «Birthdate {id}», где {id} - это число, основанное на количестве добавленных.

В методе успеха я делаю

$("#BirthDate" + childAdded).datepicker();

. Это прекрасно работает для последней программы выбора даты рождения.Если я добавлю «3 детей», у «Дата рождения третьего ребенка» будет указатель даты при загрузке, но 1-й и 2-й потеряют средство выбора даты.Добавление 4-го затем удалит средство выбора даты из 3-го.

Код:

function addChild() {
  $.ajax({
    type: "GET",
    url: "/Home/AddChild?childNumber=" + $("#CurrentNumberOfChildren").val(),
    data: "{}",
    contentType: "text/html",
    dataType: "html",
    success: function (results) {
      var div = document.getElementById('ChildDiv');
      div.innerHTML += results;
      $("#CurrentNumberOfChildren").val(parseInt($("#CurrentNumberOfChildren").val()) + 1);
      var numberOfChildren = $("#CurrentNumberOfChildren").val();
      $("#BirthDate" + numberOfChildren).datepicker();
    }
  });
}

Кто-нибудь когда-нибудь сталкивался с этим?

Answer 1

Эта строка - div.innerHTML += results; - перезаписывает все содержимое div каждый раз, когда вы добавляете новый дочерний раздел. Это означает, что вы теряете перехватчики событий и т. Д. На элементах, которые ранее были в div, хотя переписанные элементы используют те же id s и т. Д. Я подозреваю, что именно это нарушает ваши средства выбора даты.

Чтобы исправить это, вам нужно добавить новый контент к тому, что уже есть в div, вместо того, чтобы каждый раз переписывать весь контент. Попробуйте заменить эти две строки:

var div = document.getElementById('ChildDiv');
div.innerHTML += results;

С этим:

$('#ChildDiv').append(results);

Answer 2

.live () - jQuery API

Как насчет jQuey.live?

Хотя изменение селектора необходимо.

Answer 3

Я предполагаю, что ваше частичное представление возвращает все текстовые поля, предыдущие плюс новые, так как вы заменяете HTML-код div результатом. В этом случае предыдущие элементы (к которым вы добавили указатели даты) были удалены со страницы. Если это так, то вам нужно повторно добавить указатели даты ко всем вашим BirthDate элементам.

Answer 4

Из того, что я вижу, вы, вероятно, получили несколько элементов с одинаковым идентификатором.Для корректной работы jQuery нужен действующий dom.Вы можете проверить свою разметку на w3c .

Можете ли вы добавить ответ частичного представления на ваш вопрос, а также версию jquery & ui?