Question

我是JQuery的新手。我试图使用ReplaceWith和Clone快速将文本框中的数据恢复到原始状态，如果用户单击取消按钮。当用户单击“编辑”时，“编辑”按钮将消失，并替换为“保存”和“取消”按钮，并启用文本框。如果他们按下取消，我希望将其翻转，如果原始文本已被更改，则恢复原始文本。

我正在尝试克隆以在单击“编辑”按钮时存储div内容，并在单击“取消”时使用RestoreWith取消更改。 CloneContent和RestoreContent函数都按预期调用（下面代码中的所有警报都按预期显示），但单击“取消”时屏幕上没有任何更改。我究竟做错了什么？

脚本 -

 var divClone;

 function CloneContent(mydiv) {
     alert('cloning');
     divClone = $(mydiv).clone(true, true);
     alert('finished cloning');
 }

 function RestoreContent(mydiv) {
     alert('restoring');
     $(mydiv).replaceWith($(divClone));
     alert('finished restoring');
     return false;
 }

和asp代码 -

<asp:panel ID="pnlNames" runat="server">

    <asp:LinkButton ID="lnkEditNames" runat="server" 
        OnClientClick="CloneContent('<%=pnlNames.ClientID%>')" 
        OnCommand="lnkEdit_Click" Text="Edit" />

    <asp:LinkButton ID="lnkUpdateNames" runat="server" 
        OnCommand="lnkUpdate_Click" Text="Save" Visible="false" />

    <asp:LinkButton id="lnkCancelEditNames" runat="server" 
        onclientclick="RestoreContent('<%=pnlNames.ClientID%>')" 
        Text="Cancel" Visible="false" /> 

    <asp:TextBox runat="server" MaxLength="50" ID="txtLastName" Enabled="false" />


</asp:panel>

Answer 1

要在用户点击“取消”时恢复原始数据，您根本不需要使用Clone和ReplaceWith。

只需在编辑时保存当前值，并在取消时将字段重置为已保存的值。

此外，在使用jQuery时，请不要使用onclick或类似的内联事件处理程序。尽量避免使用元素ID。请改用CSS类。这样，相同的JavaScript代码就可以用于页面上的所有输入字段。

ASP.NET：

<asp:panel ID="pnlNames" runat="server">
    <asp:LinkButton CssClass="edit" Text="Edit" />
    <asp:LinkButton CssClass="save" Text="Save" Visible="false" />
    <asp:LinkButton CssClass="cancel" Text="Cancel" Visible="false" />
    <asp:TextBox MaxLength="50" ID="txtLastName" Enabled="false" />
</asp:panel>

相应的JS：

$(".edit").on("click", function () {
    var $textBox = $(this).parent().find(":text"),

    // hide and show buttons    
    $(this).hide();
    $(this).parent().find(".save").show();
    $(this).parent().find(".cancel").show();

    // save current value into jQuery data for the textbox
    $textBox.data("oldValue", $textBox.val())
});

$(".cancel").on("click", function () {
    var $textBox = $(this).parent().find(":text"),

    // hide and show buttons    
    $(this).hide();
    $(this).parent().find(".save").hide();
    $(this).parent().find(".edit").show();

    // restore textbox value from jQuery data
    $textBox.val( $textBox.data("oldValue") );
});

$(".save").on("click", function () {
    // hide and show buttons    
    $(this).hide();
    $(this).parent().find(".cancel").hide();
    $(this).parent().find(".edit").show();
});

Answer 2

尚未测试..但是您将clientID直接传递给jQuery？我认为您需要在#前加上它，以便按ID查找元素。

其次，我不认为你需要在替换时再次传递$中的div

更新代码：

 var divClone;

 function CloneContent(mydiv) {
     alert('cloning');
     divClone = $('#' + mydiv).clone(true, true);
     alert('finished cloning');
 }

 function RestoreContent(mydiv) {
     alert('restoring');
     $('#' + mydiv).replaceWith(divClone);
     alert('finished restoring');
     return false;
 }

Answer 3

感谢Tomalak的回答让我走上正轨，但我不希望代码依赖于div的层次结构或可编辑div中的输入元素数量。我使用类名来标识包含div而不是“parent（）”。

首先是html。测试两个文本框，一个下拉列表和一个复选框。

<div id="divNames" name="divNames" class="LPCEditGroup memNames">

    <a id="lnkEditNames" name="lnkEditNames" onclick="SaveDefault(this)" class="editbutton memNames" href="#/">Edit</a>

    <asp:LinkButton ID="lnkUpdateNames" runat="server" OnCommand="lnkUpdate_Click" Text="Save" style="display:none;" class="updatebutton memNames"/>
    <a id="lnkCancelEditNames" name="lnkCancelEditNames" onclick="RestoreDefault(this)" style="display:none" class="cancelbutton memNames" href="#/">Cancel</a>
    <br />     
    <asp:TextBox runat="server" MaxLength="50" ID="txtLastName" CSSClass="myinput memNames"  Enabled="false" />
      <asp:TextBox runat="server" MaxLength="50" ID="TextBox1" CSSClass="myinput memNames"  Enabled="false" />
         <asp:DropDownList runat="server" ID="dd" CssClass="myinput memNames"      >
             <asp:ListItem Text ="One" Value="1"/>
             <asp:ListItem Text ="Two" Value="2" />
             <asp:ListItem Text ="Three" Value="3" />

         </asp:DropDownList>
<asp:CheckBox ID="chk" runat="server" Checked="true"  CssClass="myinput memNames"  />
</div>

脚本：

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

            $('.editbutton').click(function() {
            //remove the class name 'editbutton' from the class string which will leave us with the classname shared by the group of elements we want to edit
             var editClass = $(this).attr('class').replace('editbutton', '').replace(' ', ''); 

            var mydiv = $('div.LPCEditGroup.' + editClass).get(0);

            //replace the class name to change the panel to look selected
            $('#' + mydiv.id).attr('class', 'LPCEditGroupEditing ' + editClass);

            //get all elements sharing the edit group classname & store the default values
            $(mydiv).find('.myinput').each(function (curIdx, curO) {
                $(curO).attr('default-value', $(curO).val());
            });

            $('div#' + mydiv.id).find('.editbutton').hide();
            $('div#' + mydiv.id).find('.updatebutton').show();
            $('div#' + mydiv.id).find('.cancelbutton').show();

            //enable everything in the panel that the edit button is in
            $('div#' + mydiv.id).find(':input').prop('disabled', false);

            return true;
        })
         $( '.cancelbutton' ).click(function() {

            //restore default for all items where edit group class name is for the current edit group

             var editClass = $(this).attr('class').replace('cancelbutton', '').replace(' ', ''); 
             var mydiv = $('div.LPCEditGroupEditing.' + editClass).get(0);


             //replace the class name to change the panel to look unselected
             $('#' + mydiv.id).attr('class', 'LPCEditGroup ' + editClass);


             $(mydiv).find('.myinput').each(function (curIdx, curO) {
                $(curO).val($(curO).attr('default-value'));
            });

             $('div#' + mydiv.id).find('.editbutton').show();
             $('div#' + mydiv.id).find('.updatebutton').hide();
             $('div#' + mydiv.id).find('.cancelbutton').hide();

             //disable everything in the panel that the edit button is in
             $('div#' + mydiv.id).find(':input').prop('disabled', true);

            return true;
            });
        });

ReplaceWith函数无法使用克隆

3 个答案: