MVC partial查看jQuery datepicker刪除以前的日期選擇器

Question

我有一個頁面，我試圖將Children添加到父對象。

在頁面上，我有一個鏈接「Add Child」，它調用ajax get，併爲Child返回一個帶有文本框的部分視圖。在成功，我正在做一個函數，將結果添加到div的innerHTML。

在部分視圖上，我有一個名爲「Birthdate {id}」的出生日期的文本框，其中{id}是基於添加了多少個數字的數字。

在成功的方法，我那麼做了

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

這個偉大的工程，最新的生日日期選擇器。如果我添加3個孩子，第三個孩子div的BirthDate將有一個日期選擇器，但第一個和第二個將失去日期選擇器。然後添加第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的全部內容。這意味着即使重寫的元素使用了相同的id s等，您仍然會丟失之前在div中的元素上的事件掛鉤等。我懷疑這是什麼打破了您的日期選擇器。

要修復它，您需要將新內容追加到已在div中的內容，而不是每次都重寫整個內容。嘗試更換這兩行：

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

有了這一個：

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

Answer 2

從我可以看到你可能有多個元素共享相同的ID。 jQuery需要一個有效的dom才能正常工作。您可以在w3c上驗證您的標記。

你可以添加部分視圖的回覆你的問題，也是什麼版本的jquery & ui？

Answer 3

我假設你的部分視圖返回所有的文本框，以前的加上新的，因爲你正在用結果替換div的HTML。在這種情況下，以前的元素（添加日期選擇器的元素）已從頁面中刪除。如果是這種情況，那麼你需要重新添加日期選擇器到你所有的BirthDate元素。

Answer 4

.live() – jQuery API

如何jQuey.live？

雖然選擇器的變化是必要的。