Question

我正在开展一个小项目（只是一个实践示例 - 不是实际使用）。它是一个非常简单的CRUD应用程序，我不会大声改变index.html。还必须使用JQuery UI Dialog而不是prompt（）。

我开始使用ADD功能而且我被卡住了。我创建了一个Jquery UI对话框，该对话框附加了一个表单 - 当＆＃39;添加项目＆＃39;点击。然后点击“是”＆＃39;在表单中需要返回输入中的内容。我无法检索该值，并且没有涉及服务器端技术（如php）。 answers.js中的 function add_item（）是我现在正在工作的地方。

我也不知道为什么，但在点击“添加项目”后，我的html页面底部会显示一个额外的输入框。（它只应附加到表格中）

*注意：CRUD函数在document.ready ...页面下方开始。此外，除了index.html中的一个默认项目列表项目最初来自json文件 *

answer.js

   $(document).ready(function()
    {

///////// REMOVE ALL  ////////////
    $(document).on("click", "div a:nth-of-type(3)", function(e)
    {
        e.preventDefault();
        remove_all();
    });
    $("div a:nth-of-type(3)").click(remove_all);

    ///////// ADD ITEM  ////////////
    $(document).on("click", "#add_item", function(e)
    {
          e.preventDefault();
          add_item();
    });
    $("#add_item").click(add_item);

///////// LOAD ALL ////////////
        $(document).on("click", "div a:nth-of-type(2)", function(e)
        {
            e.preventDefault();
            load_all();
        });

///////// REMOVE ITEM  ////////////
        $(document).on("click", "#my_list a", function(e)
        {
            e.preventDefault();
            var current_item = $(this).parent();
            remove_item(current_item);
        });
        $("#my_list a").click(remove_item(current_item));

///////// EDITABLE ITEM  ////////////

});

/// CRUD FUNCTIONS ////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
function add_item()
{

$('body').append('<div id="dialog-form"><form> Add your item:<br><input type="text" name="new_item" id="new_item" ></form></div>');

//  JQUERY UI DIALOG
  $( "#dialog-form" ).dialog({
    resizable: false,
    title:'Add new item',
    height:240,
    width:260,
    modal: true,
    buttons: {
      "Yes": function() {
        var test = $('#new_item').val();
         alert(test);

        $( this ).dialog( "close" );
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    }
  });

}

function remove_all()
{
      $('#my_list li').hide();
}

function load_all()
{
        $.getJSON( "myLists/myList.json", function( json )
        {
            var items = json;
            $('#my_list li').remove();

            $.each(items, function(index,the_item)
            {
              $('#my_list').append('<li>'+the_item+'<a href="#">x</a></li>')
            });
        });
}

function remove_item(current_item)
{
        // APPEND DIALOG BOX DIV
        $('<div id="dialog-confirm">').appendTo('body');

        // JQUERY UI DIALOG
        $( "#dialog-confirm" ).dialog({
          resizable: false,
          title:'Remove this item?',
          height:140,
          width:260,
          modal: true,
          buttons: {
            "Yes": function() {
              $(current_item).hide();
              $( this ).dialog( "close" );
            },
            Cancel: function() {
              $( this ).dialog( "close" );
            }
          }
        });
  }

INDEX.HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link href="jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="answer.js"></script>
    <title>jQuery Test</title>
</head>
<body>
    <div>
        <h1>My Shopping List</h1>
        <a href="#" id="add_item">Add Item</a> | <a href="#">Load List</a> | <a href="#">Clear List</a>
        <ul id="my_list">
            <li>Brand New Shoes <a href="#">x</a></li>
        </ul>
    </div>
</body>
</html>

Answer 1

提供一些我认为可能有帮助的更新：

工作示例：https://jsfiddle.net/Twisty/5g72nncw/

$(document).ready(function() {

  ///////// REMOVE ALL  ////////////
  $(document).on("click", "div a:nth-of-type(3)", function(e) {
    e.preventDefault();
    remove_all();
  });
  $("div a:nth-of-type(3)").click(remove_all);

  ///////// ADD ITEM  ////////////
  $(document).on("click", "#add_item", function(e) {
    e.preventDefault();
    console.log("Running Add Item.");
    add_item();
  });
  $("#add_item").click(add_item);

  ///////// LOAD ALL ////////////
  $(document).on("click", "div a:nth-of-type(2)", function(e) {
    e.preventDefault();
    load_all();
  });

  ///////// REMOVE ITEM  ////////////
  $(document).on("click", "#my_list a", function(e) {
    e.preventDefault();
    var current_item = $(this).parent("li");
    remove_item(current_item);
  });
  //$("#my_list a").click(remove_item(current_item));

  ///////// EDITABLE ITEM  ////////////

});

/// CRUD FUNCTIONS ////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
function add_item() {
  if ($("#dialog-form").length == 0) {
  console.log("Dialog not found, creating new Dialog.");
    var newDialog = $("<div>", {
      id: "dialog-form"
    });
  } else {
  console.log("Dialog Found.");
    var newDialog = $("#dialog-form");
    newDialog.dialog("open");
    return true;
  }
  newDialog.append("<label style='display: block;'>Add your item:</label><input type='text' id='new_item' />");
  //$('body').append('<div id="dialog-form"><form> Add your item:<br><input type="text" name="new_item" id="new_item" ></form></div>');

  //  JQUERY UI DIALOG
  newDialog.dialog({
    resizable: false,
    title: 'Add new item',
    height: 240,
    width: 260,
    modal: true,
    autoOpen: false,
    buttons: [{
      text: "Yes",
      click: function() {
        var test = $('#new_item').val();
        console.log(test);
        $("#my_list").append("<li>" + test + " <a href='#'>x</a></li>");
        $(this).dialog("close");
        $('#new_item').val("");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
        $('#new_item').val("");
      }
    }]
  });
  //$("body").append(newDialog);
  newDialog.dialog("open");
}

function remove_all() {
  $('#my_list li').remove();
}

function load_all() {
  $.getJSON("myLists/myList.json", function(json) {
    var items = json;
    $('#my_list li').remove();

    $.each(items, function(index, the_item) {
      $('#my_list').append('<li>' + the_item + '<a href="#">x</a></li>')
    });
  });
}

function remove_item(current_item) {
  // APPEND DIALOG BOX DIV
  $('<div id="dialog-confirm">').appendTo('body');

  // JQUERY UI DIALOG
  $("#dialog-confirm").dialog({
    resizable: false,
    title: 'Remove this item?',
    height: 140,
    width: 260,
    modal: true,
    buttons: {
      "Yes": function() {
        $(current_item).hide();
        $(this).dialog("close");
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    }
  });
}

删除项目时，您希望将<li>传递给您的功能。这样它就会从<ul>中删除。

添加项目时，我没有将<div>附加到body。我注意到当你添加<div>时，因为它在加载页面时不在DOM中，所以它不会被初始化为.dialog()，因此会被渲染到HTML中。我的方法避免了这个。

创建按钮的方式没有任何问题，但这更具体，它是UI API的描述方式：http://api.jqueryui.com/dialog/#option-buttons

希望这有帮助。

从Jquery UI对话框中检索输入值

answer.js

INDEX.HTML

1 个答案: