MVC局部视图jQuery的日期选择器取出previous日期选择器 [英] MVC partial View jQuery datepicker removing previous date pickers

问题描述

我在哪里，我想孩子添加到父对象的页面。

I have a page where I am trying to add Children to a Parent object.

在页面上，我有一个链接，添加子，调用一个ajax GET，返回与文本框的儿童的局部视图。在sucess，我在做一个函数将结果添加到一个div的innerHTML。

On the page, I have a link, "Add Child", that calls an ajax get, returning a partial view with textboxes for the Child. In the sucess, i am doing a function to add the results to the innerHTML of a div.

在局部视图，我对生日一个文本框，命名为生日（编号），其中{ID}是根据有多少已被添加了许多。

On the partial view, I have a textbox for the Birthdate, named "Birthdate{id}", where the {id} is a number based on how many have been added.

在成功的方法，我那么做了。

In the success method, I am then doing a

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

这伟大工程，为最新的生日日期选择器。如果我加3名儿童，3号子div的出生日期会对负载的日期选择器，但第一和第二会失去日期选择器。添加第四便会从第三删除日期选择器。

This works great, for the latest Birthdate date picker. If I add 3 Children, the 3rd Child div's BirthDate will have a datepicker on load, but the 1st and 2nd will lose the datepicker. Adding a 4th will then remove the datepicker from the 3rd.

code：

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();
    }
  });
}

有谁碰到这个？

推荐答案

这行 - div.innerHTML + =结果; - 被重写整个的内容 DIV 每次添加一个新的子部分的时间。这意味着你失去了事件挂钩等对那名pviously $ P $的元素 DIV ，即使重写的元素使用相同的 ID 取值等等。我怀疑这是什么破坏你的datepickers。

This line -- div.innerHTML += results; -- is rewriting the entire content of the div each time you add a new child section. This means that you're losing the event hooks etc on the elements that were previously in the div, even though the rewritten elements use the same ids etc. I suspect that this is what's breaking your datepickers.

要解决它，你需要将新的内容，什么是已经追加 DIV ，而不是每次都重写整个内容。尝试更换这两行：

To fix it you'll need to append the new content to what's already in the div, rather than rewriting the entire content every time. Try replacing these two lines:

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

通过这一个：

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

这篇关于MVC局部视图jQuery的日期选择器取出previous日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！