jQuery 附加到动态创建的 div

Question

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

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

http://jsfiddle.net/9yej6/1/

我的保存代码将所有内容插入一个数组，然后变成一个字符串（使用 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 创建的？

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

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，您需要 # 前缀。