将jQuery属性应用于页面加载后创建的新元素 [英] Apply jquery propieties on new element created after the page is loaded

问题描述

我在使用jquery和bootstraps模态时遇到问题.有一个带有动态表和模式的页面，每次打开时都会加载远程内容.

I have a problem with jquery and bootstraps modal. There's a page with a dynamic table and a modal that load remote content everytime is opened.

当我第一次加载页面时，一切都很好，但是当我编辑表时(更精确地说，当我添加或编辑行时)，模态函数停止工作.在这种情况下，浏览器将直接打开远程页面 read_properties.php

When I load the page for the first time everything works fine, but when I edit the table, to be more precise when I add or edit a row, the modal function stop working. In this cases the browser open directly the remote page, read_properties.php

这就是我所说的模式，每一行都有一个不同的id:

This is how I call the modal, every row has a different id:

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

这是将远程内容加载到模式中的jQuery事件(我在Stackoverflow上找到了此解决方案):

And this is the jQuery event that load remote content in to the modal (I found this solution here on 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"); 
  });
});

谢谢大家！

推荐答案

解决方案很简单.我已经编辑了第一行，并在文档正文上使用了.on事件:

The solution was simple. I've edit the first line and use the .on event on the document body:

$(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属性应用于页面加载后创建的新元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！