0

我正在尝试使用 jquery 生成动态表单。

jQuery

<script>
    $(document.body).delegate('#AddFeature', 'click', function(event) {
        event.preventDefault();
        var htm = "";
        htm += "<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' name='module[][]' placeholder='Enter Feature'/>";
        $('#AddFeatureSpace').append(htm);
    });

    $(document.body).delegate('#AddModule', 'click', function(event) {
        event.preventDefault();
        var htm = '';
        htm += "<input type='text' name='module[]' placeholder='Enter Module'/>";
        htm += "<span id='AddFeatureSpace'></span><a href='#' id='AddFeature'>Add Feature</a><br/>";
        $('#AddModuleSpace').append(htm);
    });
</script>

HTML

<form method='post'>
<input type='text' name='module[]' placeholder='Enter Module' />
<span id="AddFeatureSpace"></span><a href='#' id='AddFeature'>Add Feature</a>
<br />
<a href='#' id="AddModule">Add Module</a>
<div id="AddModuleSpace">
</div>
</form>

当我单击添加功能时，它第一次添加非常好。但是当我尝试添加模块然后在其下添加功能时，它会添加到第一个模块。我知道原因，因为它们具有相同的 id。我需要将它们附加到父跨度而不是不同的跨度。

4

4 回答 4

1

我不确定您的问题是什么，但是如果您需要具有相同标识符的多个元素，则应该使用类而不是 ID。ID 必须是唯一的。

<span class="AddFeatureSpace"></span>
<a href='#' class='AddFeature'>Add Feature</a><br/>
<a href='#' class="AddModule">Add Module</a>
<div class="AddModuleSpace"></div>

$(document.body).delegate('.AddModule', 'click', function(event) { ... });
// Etc...

此外，您真的不应该使用&nbsp;填充 - 改用 CSS。

如何仅将功能添加到父模块

您可以使用 引用元素的父级.parent()。

于 2013-05-20T12:53:47.370 回答
0

试试这个

<form method='post'>
<script type="text/javascript">
$(document.body).delegate('#AddFeature', 'click', function(event) {
event.preventDefault();
var htm="";
htm+="<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' 
name='module[][]' placeholder='Enter Feature'/>";
$('#AddFeatureSpace').append(htm);
});
</script>

<script type="text/javascript">
$(document.body).delegate('#AddModule', 'click', function(event) {
event.preventDefault();
var htm='';
htm+="<input type='text' name='module[]' placeholder='Enter Module'/>";
htm += "<span id='AddFeatureSpace'></span><a href='#' id='AddFeature'>Add Feature</a>        
<br/>";
$('#AddModuleSpace').parent().append(htm);
});
</script>
<input type='text' name='module[]' placeholder='Enter Module'/>
<span id="AddFeatureSpace"></span>
<a href='#' id='AddFeature'>Add Feature</a><br/>
<a href='#' id="AddModule">Add Module</a>
<span id="AddModuleSpace"></span>
</form>
于 2013-05-20T13:02:45.757 回答
0

这是一个丑陋但实用的小提琴

HTML

<form method='post' id="Modules">
    <input type='text' name='module[]' placeholder='Enter Module' />
    <div class="AddFeatureSpace"> 
        <a href='#' class='AddFeature'>Add Feature</a>

    </div> 

    <a href='#' class="AddModule">Add Module</a>
    <div class="AddModuleSpace"></div>
</form>

jQuery

$('#Modules')
    .on('click', '.AddFeature', function () {
    $(this).closest('.AddFeatureSpace').append($('<input type="text" name="module[][]" placeholder="Enter Feature"/>'));
})
    .on('click', '.AddModule', function () {
    var el = '<input type="text" name="module[]" placeholder="Enter Module"/>' +
        '<span class="AddFeatureSpace">' +
        '<a href="#" class="AddFeature">Add Feature</a>' +
        '</span>';
    $(this).siblings('.AddModuleSpace').append($(el));
});
于 2013-05-20T13:03:23.507 回答
0

Working FIDDLE Demo

HTML

让我们的 HTML 变得更好是个好主意：

<form method='post'>

    <div class="modules">
        <!-- modules container -->
    </div>

    <a href='#' id="AddModule">Add Module</a>
</form>


<!-- module template -->
<div class="module raw">
    <input type='text' name='module[]' placeholder='Enter Module' />

    <a href='#' id='AddFeature'>Add Feature</a>

    <div class="features">
        <!-- features container -->
    </div>

    <hr />
</div>

<!-- feature template -->
<div class="feature raw">
    <input type="text" name="module[][]" placeholder="placeholder" />
</div>

CSS

我们将隐藏我们的.raw元素：

.raw { display: none; }

JavaScript

$(function () {
    $('body').on('click', '#AddFeature', function (e) {
        e.preventDefault();

        // clone a raw feature
        $('.feature.raw').clone()

        // remove class raw from it
        .removeClass('raw')

        // and append it to the current module
        .appendTo($(this).closest('.module').find('.features'));
    });

    $('body').on('click', '#AddModule', function (e) {
        e.preventDefault();

        // clone a raw module
        $('.module.raw').clone()

        // remove class raw from it
        .removeClass('raw')

        // and append it to the modules container
        .appendTo('.modules');
    });
});

截屏

在此处输入图像描述

于 2013-05-20T13:08:18.080 回答