来自引导模型的 Ajax 调用在烧瓶中不起作用答案

【问题标题】：Ajax call from bootstrap model not working in flask来自引导模型的 Ajax 调用在烧瓶中不起作用
【发布时间】：2016-06-18 04:49:51
【问题描述】：

我正在使用烧瓶中的应用程序，并且在通过 ajax 调用加载时无法处理引导模式。我有两个步骤来加载模态内容，然后处理结果。

单击链接时 - jquery 中的绑定事件处理该事件并在烧瓶应用程序中对路由函数进行 ajax 调用，该函数将返回带有数据对象的 html 页面。
成功完成调用 - 模态内容将与 jinja 用于填充所需字段的数据对象一起返回，并加载表单以发送消息。
点击回复后，将对另一个应用程序功能进行另一个 ajax 调用，并且模式将被关闭。为简单起见点击回复按钮 - 我只是关闭模式并打开另一个模式。

这个逻辑在烧瓶环境之外工作得很好。这是带有工作示例的codepen - http://codepen.io/jascodepen/pen/QEKyyK

$(document).ready(function() {
  $("#showConversation").click(function() {
      $('#user1Message').modal('show');
  });
  $("#postReply").click(function()
  {  
    $('#user1Message').modal('hide');
    $('#calModal').modal('show');
  });
});

点击 id showConversation
加载模式 user1Message
点击回复
- 关闭 user1Message
- 加载另一个模态

但类似的逻辑在烧瓶中不起作用
- 点击 id showConversation
- 对烧瓶路由 func view_conversation 进行 ajax 调用
- view_conversation 将返回 example.html 以及数据对象（为简单起见，只返回可运行代码中的 html）
- 成功完成的 Ajax 调用将加载从调用返回的内容的模式
- 在点击回复时，现在什么都没有发生

请在此处查看烧瓶代码
http://code.runnable.com/V2ReWCVEN612N5gJ/bootstrap-modal-pop-up-issue-for-python-and-flask

关于可运行代码的一些细节。
- base.html 中的 JS 脚本
- 要在 modal.html 中加载的模态
- 由 example.html 中的 ajax 调用加载的模态内容

codepen 和可运行代码之间的唯一区别在于，在 codepen 中，我没有使用 ajax 调用加载模态的一部分。不确定，如果这是导致问题的原因

【问题讨论】：

我已经有一段时间没有使用 jQuery 了，但我知道 click 在调用后不会影响添加到页面的元素。为此，您需要使用 on。
谢谢！这就是问题所在。最好通过将事件绑定到父 div 来处理。在另一篇文章中提到的一个答案中提到了它。我会在答案中提供更多信息

标签： jquery ajax flask

【解决方案1】：

正如 dirn 在评论中提到的，问题是当元素在被调用后添加到页面时点击不生效。

在这篇文章的一个答案中提到了解决方案 Event when element added to page

jQuery.on() 方法会更合适，例如：

$("#myParentContainer").on('click', '.removeItemButton', function(){
      alert($(this).text() + ' has been removed'); 
}

例如，如果您有应该响应点击的动态内容，最好使用 jQuery.on 将事件绑定到父容器。

【讨论】：