ASP.NET錯誤：「在子元素關閉之前無法修改父容器元素」

Question

我試圖做這個方法有一個巨大的問題。我有一個網頁，我需要編寫一個方法來返回特定屬性的編輯器。該顏色的方法實現了「來自eyecon.ro的JQUERY Colorpicker」。

private static string GetColorBox(string name, int width, string value) 
{ 
    return "<input type=\"text\" maxlength=\"6\" size=\"6\" id=\"colorPickerHolder" + name + "\" value=\"000000\" />" + 
     "<script type=\"text/javascript\">" + 
     "$('#colorPickerHolder" + name + "').ColorPicker(" + 
     "{" + 
      "onSubmit: function(hsb, hex, rgb, el) " + 
      "{" + 
      "$(el).val(hex);" + 
      "$(el).ColorPickerHide();" + 
      "}," + 
      "onBeforeShow: function() " + 
      "{" + 
      "$(this).ColorPickerSetColor(this.value);" + 
      "}" + 
     "})" + 
     ".bind('keyup', function()" + 
     "{" + 
      "$(this).ColorPickerSetColor(this.value);" + 
     "});" + 
    "</script>"; 
} 

我有幾個調用此方法，但在第一次調用後的第二個抱怨說：

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Mon, 9 Nov 2009 19:35:33 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://localhost:1442/Slide/CreateTemplateSlide/33

它呈現出現這樣的HTML：

<tr> 
    <td width="150px" nowrap="nowrap"> 
     Text color: 
    </td> 
    <td> 
     <input type="text" maxlength="6" size="6" id="colorPickerHolderTextColor" value="000000" /><script type="text/javascript">$('#colorPickerHolderTextColor').ColorPicker({onSubmit: function(hsb, hex, rgb, el) {$(el).val(hex);$(el).ColorPickerHide();},onBeforeShow: function() {$(this).ColorPickerSetColor(this.value);}}).bind('keyup', function(){$(this).ColorPickerSetColor(this.value);});</script> 
    </td> 
</tr> 

<tr> 
    <td width="150px" nowrap="nowrap"> 
     Text size: 
    </td> 
    <td> 
     <input name="TextSize" width="5px" type="text" value=""></input> 
    </td> 
</tr> 

<tr> 
    <td width="150px" nowrap="nowrap"> 
     Background color: 
    </td> 
    <td> 
     <input type="text" maxlength="6" size="6" id="colorPickerHolderBackColor" value="000000" ><script type="text/javascript">$('#colorPickerHolderBackColor').ColorPicker({onSubmit: function(hsb, hex, rgb, el) {$(el).val(hex);$(el).ColorPickerHide();},onBeforeShow: function() {$(this).ColorPickerSetColor(this.value);}}).bind('keyup', function(){$(this).ColorPickerSetColor(this.value);});</script> 
    </td> 

我沒有關於爲什麼會發生這種事情，任何人都會指出我朝着正確的方向發展？

Answer 1

嘗試關閉script標記前面的input標記。

編輯：您可能還想從該調用中刪除腳本部分，並製作專用於某個特定類的腳本部分。

private static string GetColorBox(string name, int width, string value) 
{ 
    return "<input class=\"myParticularColorBoxingClass\" type=\"text\" maxlength=\"6\" size=\"6\" id=\"colorPickerHolder" + name + "\" value=\"000000\" >"; 
} 

EDIT2：您可以通過在頁面中直接添加它運行腳本一次。
請你可以嘗試把它放入你的頁面嗎？
請記得添加class=\"myParticularColorBoxingClass\"（參見上面的方法）。

<script type="text/javascript"> 
    //run this after document has finished loading! 
    $(document).ready(
     function() { 
     //activate all inputs with "myParticularColorBoxingClass" class 
     $('input .myParticularColorBoxingClass').ColorPicker(
       { 
        onSubmit: function(hsb, hex, rgb, el) 
        { 
        $(el).val(hex); 
        $(el).ColorPickerHide(); 
        }, 
        onBeforeShow: function() 
        { 
        $(this).ColorPickerSetColor(this.value); 
        } 
       }) 
       .bind('keyup', function() 
       { 
        $(this).ColorPickerSetColor(this.value); 
       }); 
     } 
    ); 
</script>