Question

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

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

这种逻辑在烧瓶环境之外完全正常。这是codepen的工作示例 - package.json

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

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

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

请在此处查看烧瓶代码 http://codepen.io/jascodepen/pen/QEKyyK

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

只有codepen和runnable代码之间的区别在于，在codepen中，我没有使用ajax调用加载modal的一部分。不确定，如果这是造成问题的原因

Answer 1

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

本文的一个答案中提到了解决方案 Event when element added to page

jQuery.on（）方法更合适，例如：

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

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

来自bootstrap模型的Ajax调用不在flask中工作

1 个答案: