jQuery 如何 add/remove 从动态创建的 div 中动态创建元素？

Question

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

层次结构如下：

 Project:

    Module:
      Task 1:
      Task 2:

    Module 2:
      Task 3:
      Task 4:

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

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

Answer 1

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

'<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('')
};

Answer 2

我使用 fiddle 迭代中使用的 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();

});

jQuery 如何 add/remove 从动态创建的 div 中动态创建元素？

jQuery How to add/remove dynamically created elements from dynamically created divs?

jquery

dynamic

selector