Question

我遇到了jquery和bootstraps模式的问题。有一个包含动态表的页面和一个每次打开时加载远程内容的模式。

当我第一次加载页面时，一切正常，但是当我编辑表格时，为了更加精确地添加或编辑行，模态功能停止工作。在这种情况下，浏览器直接打开远程页面 read_properties.php

这就是我调用模态的方式，每一行都有不同的id：

<a data-target="#id_target" href="read_properties.php?id=xx">

这是将远程内容加载到模态的jQuery事件（我在Stackoverflow上找到了这个解决方案）：

$("a[data-target=#id_target]").click(function(ev) {
  ev.preventDefault();
  var target = $(this).attr("href");

  $("#id_target .modal-body").load(target, function() { 
   $("#id_target").modal("show"); 
  });
});

感谢所有人！

Answer 1

试试这个，

$("a[data-target=#id_target]").live(function(ev) {
  ev.preventDefault();
  var target = $(this).attr("href");

  $("#id_target .modal-body").load(target, function() { 
   $("#id_target").modal("show"); 
  });
});

点击不会与动态HTML绑定。所以你需要使用实时监听器。

Answer 2

解决方案很简单。我编辑了第一行并在文档正文中使用.on事件：

$(document.body).on('click', "a[data-target=#ads]", function(ev){
  ev.preventDefault();
  var target = $(this).attr("href");

  // load the url and show modal on success
  $("#ads .modal-body").load(target, function() { 
    $("#ads").modal("show"); 
  });
});

在加载页面后创建的新元素上应用jquery属性

2 个答案: