jQuery 对话框：如何在关闭时删除已添加但未保存的项目

Question

我有一个 jQuery 对话框弹出窗口，我可以在其中查看现有内容并将项目添加到现有内容中。单击 SAVE-Button 后立即保存新内容。

<div id="container">
  <ul>
    <li>Elem 1</li>
    <li>Elem 2</li>
  </ul>

  <button id="btnAdd">ADD</button>
  <button id="btnSave" value="submit">SAVE</button>
</div>

<button id="openModal">Open dialog</button>

---------------------------------------------

$(function() {
    $( "#container" ).dialog();
});

$('#openModal').click(function() {
    $( "#container" ).dialog();
});

$('#btnAdd').click(function() {
    $( "#container ul" ).append( "<li>NEW Elem</li>" );
});

$('#btnSave').click(function() { /* ignore */ });

我现在的问题是，当用户单击标题栏中的 "X"（关闭）时，内容不会受到任何挫折。我想回到最初打开对话框时和添加新项目之前的原始状态。

如何解决？

Fiddle-Demo: https://jsfiddle.net/SchweizerSchoggi/vsd1qpLg/

编辑：我已经更新了样本。这只是简化了。我无法将 class 或 Id 添加到新的 li 中。

Answer 1

只需在您的 jquery 代码中添加此功能

var numlist = $('li').length;

$( "#container" ).on( "dialogclose",function(event,ui){
     var count = 1;       
     $('li').each(function(){
       if(count>numlist)
       {
           $(this).remove();
       }
       count++;
     }); 
});

或者你可以使用这个

var numlist = $('li').length;

$( "#container" ).on( "dialogclose",function(event,ui){
     var finallist = $('li').length;   
     $('li').slice( numlist,finallist).remove();
});

Answer 2

处理 beforeClose 事件：

$(function () {
  // save the dialog original content
  var innerHtml = $("#container").html();
  $("#container").dialog({
    autoOpen: false,
    beforeClose: function(event, ui) {
      // restore the dialog original content
      $("#container").html(innerHtml);
    }
  });

  $('#openModal').click(function(e) {
    $( "#container" ).dialog('open');
  });
});

// the event delegation for buttons inside the dialog change in:
$(document).on('click', '#btnAdd', function() {
  $( "#container ul" ).append( "<li class='green'>NEW Elem</li>" );
});

$(document).on('click', '#btnSave', function() {
});

#container { padding: 10px; border: solid 1px red; margin-bottom: 30px; }
#container button { margin-top: 20px; }

#container ul li.green { color: green; }

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<div id="container">
    <ul>
        <li>Elem 1</li>
        <li>Elem 2</li>
    </ul>

    <button id="btnAdd">ADD</button>
    <button id="btnSave" value="submit">SAVE</button>
</div>

<button id="openModal">Open dialog</button>

Answer 3

希望你需要这样的东西。

将保存的 li 存储在单独的全局变量中。

ulhtml = $("#container ul").html();

在打开模型时附加保存的 li。

$("#container ul").html(ulhtml);

FIDDLE DEMO

var ulhtml;
$(function () {
    ulhtml = $("#container ul").html();
    $("#container").dialog();
});
$('#openModal').click(function () {
    $("#container ul").html(ulhtml);
    $("#container").dialog();
});

$('#btnAdd').click(function () {
    $("#container ul").append("<li class='green'>NEW Elem</li>");
});

$('#btnSave').click(function () {
    ulhtml = $("#container ul").html();
});

jQuery 对话框：如何在关闭时删除已添加但未保存的项目

jQuery dialog: How to remove added but unsaved items on close

asp.net-mvc

jquery

jquery-ui

jquery-dialog