Question

尝试使用JSON将保存/加载功能添加到使用jsPlumb的图表中。保存功能的工作方式类似于魅力，但加载功能无法复制完整的初始保存状态。也就是说，当jQuery尝试追加到新近/动态创建的div时会出现问题。

jsfiddle具有以下功能：我可以添加div容器的项目。在这些内部，我可以通过点击绿色项目来添加任务。

我的保存代码将所有内容插入到一个数组中，然后变成一个字符串（使用JSON）。

$('#saveall').click(function(e) {
    // Saving all of the projects' parameters
    var projects = []
    $(".project").each(function (idx, elem) {
      var $elem = $(elem);
      projects.push({
        blockId: $elem.attr('id'),
        positionX: parseInt($elem.css("left"), 10),
        positionY: parseInt($elem.css("top"), 10)
      });
    });

    // Saving all of the tasks' parameters
    var tasks = []
    $(".task").each(function (idx, elem) {
      var $elem = $(elem);
      tasks.push({
        blockId: $elem.attr('id'),
        parentId: $elem.parent().attr('id')
      });
    });

    // Convert into string and copy to textarea
    var flowChart = {};
    flowChart.projects = projects;
    flowChart.tasks = tasks;
    var flowChartJson = JSON.stringify(flowChart);
    $('#jsonOutput').val(flowChartJson);
});

加载代码反向执行相同的操作。

  $('#loadall').click(function(e) {
      // Delete everything from the container
      $('#container').text("");

      // Convert textarea string into JSON object
      var flowChartJson = $('#jsonOutput').val();
      var flowChart = JSON.parse(flowChartJson);

      // Load all projects
      var projects = flowChart.projects;
      $.each(projects, function( index, elem ) {
        addProject(elem.blockId);
        repositionElement(elem.blockId, elem.positionX, elem.positionY)
      });

      // Try to load all tasks
      var tasks = flowChart.tasks;
      $.each(tasks, function( index, elem ) {
        //Problem occurs here, I am unable to reference the created project
        $(elem.parentId).text('This is a test');
        addTask(elem.parentId, 0);
      });   
 });

基本上，jsFiddle中的$(parentId).append(newState); 第75行不起作用，我似乎无法引用该div，因为它是刚刚使用jquery创建？

编辑：更具体地说，我利用这些函数来创建实际的项目和任务div s

function addProject(id) {  
var newProject = $('<div>').attr('id', id).addClass('project').text(id);

  $('#container').append(newProject);

  jsPlumb.draggable(newProject, {
    containment: 'parent'   }); 
}

function addTask(parentId, index) {
var newState = $('<div>').attr('id', 'state' + index).addClass('task').text('task ' + index);

  $(parentId).append(newState);
}

Answer 1

应该是：

$('#' + parentId).append(newState);

要在jQuery选择器中搜索ID，您需要#前缀。

jQuery附加到动态创建的div

1 个答案: