Question

我正在尝试制作一个包含3个字段的表单。它还有一些按钮，用于添加另一组称为模块的字段。这部分有效。然后，创建的每个模块都应该能够在它们下面创建更多的字段集，称为任务。

层次结构：

 Project:

    Module:
      Task 1:
      Task 2:

    Module 2:
      Task 3:
      Task 4:

我遇到的问题是我添加任务时。您可以添加模块，并正确地按下原始表单按钮。当我尝试将任务添加到位于模块div中的div时，两者都是动态创建的，它将任务添加到错误的位置，并且它们只是运行它们下面的内容。下面的小提琴是我现在的状态：

http://jsfiddle.net/smkarber/ezdk96z3/16/

Answer 1

我使用在这个小提琴迭代中使用的jQuery解决了它：

http://jsfiddle.net/smkarber/ezdk96z3/19/

基本上，我必须使用家庭关系进行导航，并且因为层次结构总是相同的，所以它非常可靠。

$('#div_form').on('click', '.f_addTask', function() {

    $(this).parent().parent().children('.div_task').append('<div class="p_task">
    <label for="t_name">Task Name: </label><input type="textbox" class="t_name p_fields" 
    /><br/><label for="t_desc">Description: </label><input type="textbox" class="t_desc 
    p_fields" /><br/><label 
    for="t_date">Due Date: </label><input type="date" class="t_date p_fields" /><br/>
    </div>');

});

$('#div_form').on('click', '.f_undoAddTask', function() {

        $(this).parent().parent().children('.div_task').children('.p_task:last')
        .remove();

});

Answer 2

您可以创建一个全局计数器，并将此计数器附加到要插入任务的容器中：

'<div class="div_task_'+count+'"></div>'
'<input type="button" value="Add Task" id="f_addTask" onclick="addTask('+count+')" />'
'<input type="button" value="Undo Add" id="f_undoAddTask" onclick="removeTask('+count+')" />'

然后在JS上

function addTask(counter){
    $('#div_task_'+counter).append('')
};

jQuery如何从动态创建的div中添加/删除动态创建的元素？

2 个答案: