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

我会做这样的事情：

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);
});

我选择了＆＃34;身体＆＃34;元素到＆＃34; on＆＃34;因为它要使用动态添加的元素，所以必须在静态元素上调用它，这些元素从一开始就存在。你也可以使用一些＆＃34; .posts-container＆＃34;元素或类似元素，您只需确保在页面加载时它就在那里。

Answer 2

修改

那么您想要使用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 3

您可以在此处使用事件委派概念。

尝试仅使用类fa-trash向文档中的那些图像添加事件。使用委托它可以处理所有图像，这些图像也是动态添加的dom的一部分

检查以下代码段

＆＃13;

$(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
    });

}

＆＃13;

<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>

＆＃13;

Answer 4

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

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

可在http://api.jquery.com/on/

找到的示例代码

如何使用jquery

4 个答案: