MVC 部分视图 jQuery 日期选择器删除以前的日期选择器
我有一个页面，我试图将子对象添加到父对象。
在页面上，我有一个链接“添加子项”，它调用 ajax get，返回带有子项文本框的部分视图。在成功中，我正在执行一个函数将结果添加到 div 的 innerHTML 中。
在部分视图上，我有一个出生日期文本框，名为“Birthdate{id}”，其中 {id} 是基于已添加的数字的数字。
在成功方法中，我正在
$("#BirthDate" + childAdded).datepicker();
为最新的生日日期选择器做一个“这非常有效”。如果我添加 3 个孩子，则第 3 个孩子 div 的出生日期将加载一个日期选择器，但第 1 个和第 2 个孩子将丢失日期选择器。添加第四个日期将会从第三个日期中删除日期选择器。
代码：
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();
}
});
}
有人遇到过这种情况吗？
I have a page where I am trying to add Children to a Parent object.
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.
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();
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();
}
});
}
Anyone ever run into this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这行 --
div.innerHTML += results;-- 每次添加新的子部分时都会重写div的整个内容。这意味着您将丢失div中先前元素上的事件挂钩等，即使重写的元素使用相同的id等。我怀疑这就是破坏你的日期选择器的原因。要修复此问题，您需要将新内容附加到
div中已有的内容，而不是每次都重写整个内容。尝试替换这两行：用这一行：
This line --
div.innerHTML += results;-- is rewriting the entire content of thediveach time you add a new child section. This means that you're losing the event hooks etc on the elements that were previously in thediv, even though the rewritten elements use the sameids etc. I suspect that this is what's breaking your datepickers.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:With this one:
据我所知，您可能有多个元素共享相同的 id。 jQuery 需要一个有效的 dom 才能正常工作。您可以在 w3c 验证您的标记。
您能否将部分视图的响应添加到您的问题中，以及 jquery 和 jquery 的版本？用户界面？
From what I can see you have probably got multiple elements sharing the same id. jQuery needs a valid dom to work correctly. You can validate your markup at w3c.
Can you add the response of the partial view to your question, also what version of jquery & ui?
我假设您的部分视图返回所有文本框，包括以前的文本框和新文本框，因为您正在用结果替换 div 的 HTML。在这种情况下，先前的元素（您添加了日期选择器的元素）已从页面中删除。如果是这种情况，那么您需要将日期选择器重新添加到所有 BirthDate 元素中。
I'm assuming that your partial view returns all of the textboxes, the previous ones plus the new ones since you are replacing the HTML of the div with the result. In that case, the previous elements (to which you added the datepickers) have been removed from the page. If that's the case then you'll need to re-add the datepickers to all of your BirthDate elements.
.live() – jQuery API
jQuey 怎么样。居住？
尽管改变选择器是必要的。
.live() – jQuery API
How about jQuey.live?
Though the change of selector is necessary.