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

【问题标题】：Jquery won't influence dynamically loaded contentJquery 不会影响动态加载的内容
【发布时间】：2013-01-02 00:56:20
【问题描述】：

我正在制作一个动态加载到内容区域的表单。单击链接时，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>

表单通过 .load() 函数从外部 html 文件动态加载到包含在“内容”div 中的 div 中。它替换了该 div 中先前存在的其他内容。

我用 jQuery 尝试过这样的事情：

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

这不是错误使用 .clone() 或 .prependTo() 函数的问题，即使我在函数中添加了一个简单的警报，也没有任何反应。我试过摆弄查找和过滤，但没有结果。如果有人指出我做错了什么，我将不胜感激。

【问题讨论】：

我不确定，但您将这里的.on() 添加到#addRespondent 对吧？但不是#main，它也是动态加载的。只是猜测，但如果将第二行更改为：$('body').on('click','#addRespondent', function(e) { ... 并在其后立即发出警报会发生什么。
为我工作 -> jsfiddle.net/manseuk/esXDQ 你还有其他可能干扰的代码吗？可能有多个具有相同 ID 的 DOM 元素？
您是否有多个元素具有相同的 id addRespondent？
$('p.respondent').first().clone()
您的控制台显示什么？

标签： jquery ajax forms dynamic

【解决方案1】：

我在您的代码中看到的唯一问题是，而不是

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

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

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

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

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

另外，#main 是否有可能在文档准备就绪时不存在？如果是这样，而不是

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

你应该委托给其他元素：

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

【讨论】：