删除后,Div不能添加到另一个div

时间:2012-12-31 13:04:38

标签: jquery html dynamic

我是jquery和网络编程的新手,并且是一个动态的html控件。

如果用户从组合框中选择一个值,我会创建一个由用户选择的html控件。之后

我删除了之前的html控件。

这是我想要复制到另一个div的主要div

<div id="MainContents" style="display: none" >
        <form action="../../newCV/AsyncUpload" id="photoform" enctype="multipart/form-data" method="post">
              <p> <input type="file" id="photo" name="photo" /></p>

            <p><input type="submit" value="Save my profile" /></p>
        </form>
    </div>      

这是我的jqeurty函数的一部分

case "Date":
                $('#c3').remove();
                $("<input name=\"c3\" id=\"c3\" type=\"date\"/>").appendTo("#changeablecontrol");

                break;

            case "Picture":

                $('#c3').remove();

                var html = "<div id=\"c3\" name=\"c3\"></div>";
                $(html).appendTo("#changeablecontrol");

                $('#MainContents').css('display', "inline").appendTo('#c3');

第一次,如果我选择图片,maintcontents div会附加到div c3。没关系。但是,如果我选择日期(删除c3)并再次选择图片,那个时间它不会附加。因为当我选择Date时,它还会删除我表单中的MainContents div。我不知道它为什么删除MainContents div。因为它在不同的部分。然后当我在组合框中第二次选择图片时,它不是我的形式。

我尝试在jquery中使用html代码创建maincontents,但那时,某些函数不起作用。

这是我的changeablecontrols div

  <div class="creatediv2" id="changeablecontrol">
    @Html.TextBox("c3","" ,new { onkeydown = "if (event.keyCode == 13) document.getElementById('create').click()" })
</div >

我使用了append而不是appendTo

html += "<div id=\"MainContents\">"
                html += "<form id=\"photoform\"  action=\"../../NewCV/AsyncUpload\"   enctype=\"multipart/form-data\" method=\"post\">"; //method=\"post\"
                html += "<input type=\"file\" id=\"photo\" name=\"photo\" />";
                html += "<input type=\"submit\" id=\"uploadbtn\" value=\"Upload Photo\" /></form>";
                html += "</div>"
                $('#c3').append(html);

但是这个jquery函数不起作用

   $(function() {

            $("#photo").makeAsyncUploader({
                upload_url: "../newCV/AsyncUpload",
                flash_url: '../Scripts/swfupload.swf',
                button_image_url: '../../Content/blankButton.png',
                disableDuringUpload: 'INPUT[type="submit"]'
            });

        });

我希望我解释了我的问题..

2 个答案:

答案 0 :(得分:1)

  

我不知道为什么它会删除MainContents div。因为它在不同的部分。

不,不是。你已将它附加到#c3,所以当你删除(删除)#c3你也删除了他所有的孩子。也许您应该使用append()而不是appendTo()函数?

答案 1 :(得分:0)

正如bumerang所说,我为每个控件创建了div,并将其显示值从hide更改为inherit。

  <div class="creatediv2" id="changeablecontrol">

      <div id="filecontent" style="display: none" >
        <form action="/NewCV/AsyncUpload" id="photoform" enctype="multipart/form-data" method="post">
              <p> <input type="file" id="photo" name="photo" /></p>

            <p><input type="submit" value="Save my profile" /></p>
        </form>


  </div>     

<div id="textcontent" style="display: inherit">
    <input id="c3-1" name="c3" onkeydown="if (event.keyCode == 13) document.getElementById('create').click()" type="text" value="" />

</div>

<div id="longtextcontent" style="display: none">
      <textarea name="c3" id="c3-2" rows="5" cols="20"></textarea>
</div>

<div id="datecontent" style="display: none">
       <input name="c3" id="c3-3" type="date"/>
</div>


    </div >

我的jsquery函数

    <script type="text/javascript">
        $(function() {

            $("#photo").makeAsyncUploader({
                upload_url: "/newCV/AsyncUpload",
                flash_url: '/Scripts/swfupload.swf',
                button_image_url: '/Content/blankButton.png',
                disableDuringUpload: 'INPUT[type="submit"]'
            });

        });
    </script> 

这个正在改变显示器&#39;值

  var val = cmb.options[cmb.selectedIndex].text;

        switch (val) {
            case "Text":
                $('#textcontent').css('display', 'inherit');
                $('#longtextcontent').css('display', 'none');
                $('#datecontent').css('display', 'none');
                $('#filecontent').css('display', 'none');

                break;
               case "Long Text":

                $('#textcontent').css('display', 'none');
                $('#longtextcontent').css('display', 'inherit');
                $('#datecontent').css('display', 'none');
                $('#filecontent').css('display', 'none');

                break;

            case "Date":

                $('#textcontent').css('display', 'none');
                $('#longtextcontent').css('display', 'none');
                $('#datecontent').css('display', 'inherit');
                $('#filecontent').css('display', 'none');

                break;

            case "Picture":

                $('#textcontent').css('display', 'none');
                $('#longtextcontent').css('display', 'none');
                $('#datecontent').css('display', 'none');
                $('#filecontent').css('display', 'inherit');
                break;

        default:

            break;
        }
谢谢你:)