JQuery：on（'Click'）不响应新添加的按钮答案

【问题标题】：JQuery: on('Click') not responding to newly-prepended buttonJQuery：on（'Click'）不响应新添加的按钮
【发布时间】：2015-02-07 14:25:36
【问题描述】：

我有一个工作的 Django 应用程序，当用户提交新评论时，我使用 JQuery 将 AJAX 发送到服务器端。具体来说，当用户提交新评论时，会触发以下 JQuery 函数：

$(":input[type='submit']").on('click',function(event){
     // send AJAX to Django views.py
     }

当 JSON 数据从 views.py 返回时，它将在当前页面前添加一个包含新评论文本的 HTML 块，而不刷新页面。问题是这个新的 HTML 块还包含 input[type='submit'] 元素。但是当我单击这些元素时，它们没有响应，views.py 中的 json.dumps 无法检测到它们。显然在点击按钮的时候，上面的JQuery函数并没有触发。

我检查了 Chrome 中的“查看源代码”。这些 HTML 确实出现在源代码中。它只是没有响应，HTTPResponse 只会返回一个 JSON dict 纯文本，这表明 jQuery 函数没有触发。

如果有人能帮帮我，不胜感激。谢谢！

【问题讨论】：

没有看到 HTML 就无法回答。

标签： javascript jquery ajax json django

【解决方案1】：

.on 事件仅适用于声明时存在的元素。

来自 jQuery 文档 - http://api.jquery.com/on/

事件处理程序仅绑定到当前选定的元素；他们在您的代码调用 .on() 时，该页面上必须存在。 为了确保元素存在并且可以被选择，执行事件绑定在文档就绪处理程序中的元素页面上的 HTML 标记。如果新的 HTML 被注入到页面中，在新的 HTML 之后选择元素并附加事件处理程序放置在页面中。或者，使用委托事件附加事件处理程序，如下所述。

委托事件的优点是它们可以处理来自以后添加到文档中的后代元素。经过选择一个保证在该时间存在的元素附加了委托事件处理程序，您可以使用委托事件避免频繁附加和删除事件处理程序的需要。

所以要使用委托事件，您需要将 on 事件附加到父元素，例如如果要将新 cmets 附加到元素 #container

$("#container").on('click','input[type=submit]',function(event){
   // send AJAX to Django views.py
});

示例 - http://jsfiddle.net/eg0yx920/

【讨论】：

像魅力一样工作！非常感谢！