Question

我正在制作一个动态加载到内容区域的表单。当点击链接时，jQuery应该复制该表单的一部分，以添加更多参与者。麻烦的是，它不会回应。我在这里搜索并谷歌，但由于某种原因，那里给出的答案不起作用。

这是html（或者至少它的一部分）：

<div id="container">
    <div id="main">
        <div id="content">
            <div> 
                <h1>Hello, I am a form!</h1>
                <form id="contactform">
                    <p class="respondent">
                        <input type="text" value "first name" />
                        <input type="text" value="last name" />
                    </p>
                    <span id="addRespondent">add respondent</span>
                </form>
            </div>
        </div>
    </div>
</div>

使用外部html文件，使用.load（）函数将表单动态加载到“content”div中包含的div中。它取代了该div中先前存在的其他内容。

我用jQuery尝试了类似的东西：

$(document).ready(function (e){
    $('#main').on('click','#addRespondent', function(e) {
        $('p.respondent').clone().prependTo('#addRespondent');
        e.preventDefault();
    });
});

这不正确使用.clone（）或.prependTo（）函数的问题，即使我在函数中放入一个简单的警报，也没有任何反应。我试过摆弄查找和过滤，没有结果。如果有人能指出我做错了什么，我会很感激。

Answer 1

我在代码中看到的唯一问题是代替

$('p.respondent').clone().prependTo('#addRespondent');

（将每个p.respondent添加到#addRespondent的开头），您可能需要

$('p.respondent:first').clone().insertBefore('#addRespondent');

（在p.respondent之前添加第一个#addRespondent）。也许你想要清理表格？

$('p.respondent:first')
  .clone().insertBefore('#addRespondent')
  .find("input").val("");

此外，文档准备好了，#main是否存在？如果是这样，而不是

$('#main').on('click', ...

你应该委托给其他一些元素：

$(document).on('click', ...

Jquery不会影响动态加载的内容

1 个答案: