如何使用 jquery 访问动态添加的元素

Question

我有一些来自数据库的帖子。这些帖子在页面被 ajax 加载后被添加到页面中。我在每个帖子上添加一个删除按钮，每个按钮都有一个 ID。这是我的代码：

<i class="fa fa-trash" id="unique-id"></i>

现在我想通过 onclick() 方法上的 id 在 jQuery 中访问这些按钮，但问题是这些按钮是在页面加载后添加到页面中的，我猜 jQuery 方法只能在文档就绪函数中调用.所以目前我通过以下方式这样做：

<i class="fa fa-trash" onclick="delPost('id')"></i>

这里有一些javascript：

function delPost(id) {

    var post_id = id;
    var post = "#post_"+id;

    $(post).fadeOut(300, function() {
        $.ajax({

            type : 'POST',
            url  : 'update.php',
            data: ({id : post_id, act : "rem-post"}),
            success : function()
            {
                // Some Function
            }
        }); //End of Ajax
    });

}

我想用 jQuery 调用这个函数...这可能吗？？

Answer 1

编辑

那么你想像这样使用id：

<i class="fa fa-trash" id="unique-id"></i>

然后，试试这个功能：

$(document).on('click','.fa-trash',function(){

    var post_id = $(this).attr('id');

    $(this).closest(".post").fadeOut(300, function() {
        $.ajax({

            type : 'POST',
            url  : 'update.php',
            data: ({id : post_id, act : "rem-post"}),
            success : function()
            {
                // Some Function
            }
        }); //End of Ajax
    });
});

它将正确的id 传递给Ajax 并淡出它的.post 父级。

你的函数的问题是没有检索到正确的id...
但是要使用它进行 jQuery 查找。

在这一行：

$(post).fadeOut(300, function() {

即使使用正确的id，您要定位的元素不在 dom 中。

Answer 2

我会这样做：

HTML：

<div class="post">
    ...
    <i class="fa fa-trash deleteButton" data-id="unique-post-id-here"></i>
</div>

Js：

$(body).on("click", ".deleteButton", function() {
    var post_id = $(this).attr("data-id");
    delPost(post_id);
});

我为“on”事件选择了“body”元素，因为它要与动态添加的元素一起工作，必须在静态元素上调用它，这些元素从一开始就存在。你也可以使用一些“.posts-container”元素或类似的元素，你只需要确保页面加载时它就在那里。

Answer 3

您可以在这里使用事件委托概念。

尝试仅向文档中具有类 fa-trash 的图像添加事件。通过委托，它会处理属于 dom 的所有图像，即使它们也是动态添加的

检查以下sn-p

$(document).ready(function(){
  $(document).on('click','i.fa-trash',function(){
      var id= $(this).attr('id')
      //alert(id)
     // delPost(id);
  });
});


function delPost(id) {

    var post_id = id;
    var post = "#post_"+id;

    $(post).fadeOut(300, function() {
        $.ajax({

            type : 'POST',
            url  : 'update.php',
            data: ({id : post_id, act : "rem-post"}),
            success : function()
            {
                // Some Function
            }
        }); //End of Ajax
    });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-trash" onclick="delPost('id')" id="unique-id">this is del</i>
<i>hello</i>

Answer 4

从元素中移除 onclick，并添加一个 id 和/或类（例如 class="deleteThis" data-id="4483339"）。 然后在 document.ready 中创建一个事件处理程序，如下所示：

$( ".deleteThis" ).on( "click", delPost( $(this).attr('data-id' );

示例代码见http://api.jquery.com/on/