仅使用jquery附加到父span类

Question

我正在尝试使用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>

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

Answer 1

我不确定你的问题是什么，但如果你需要多个具有相同标识符的元素，你应该使用类而不是ID。 IDs must be unique

<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...

另外，你真的不应该使用 来填充 - 而是使用CSS。

  

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

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

Answer 2

试试这个

<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>

Answer 3

这是一个丑陋但功能齐全的fiddle

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

Answer 4

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

---

截图

---

• [!]不要忘记查看FIDDLE Demo。