Question

我不知道如何将带有jquery的onClick操作附加到附加文件列表中的所有元素。

那是我的html文件。

<p>Attachements</p>
<div>
   <ul id="attach">
      <li id="KjG344D">liu-kang.jpg<img src="/images/thrash.gif" id="delete_file"></li>
      <li id="3ujRCMB">kitana.jpg<img src="/images/thrash.gif" id="delete_file"></li>
      <li id="m3NSxbf">mk2.jpg<img src="/images/thrash.gif" id="delete_file"></li>
   </ul>
</div>
<script src="/modules/delete_file.js"></script>

每次上传都会在上面的列表中添加另一个“li”，并为“li”

生成新的“id”

这就是我的delete_file.js脚本的外观

$(document).ready(function()
{
    $('#delete_file').on('click', function()
    {
    if (confirm("Are you sure you want to delete attachement ?") == true)
        {
            $.ajax({
                url: '/modules/delete_file.php', 
                type: "POST",
                dataType:'json',
                data: ({fid: this.parentElement.getAttribute("id")}),
                success: function(data){
                    alert("File was deleted");
                }
            });
            return true;
        } else {
            return false;
        }
    });
});

它运行良好但仅适用于列表中的第一个文件。当我点击列表中的第二个位置或第三个位置时，没有任何反应。

我知道我们可以将函数用于多个元素，例如：

$('.class1, .class2, .class3').click(some_function);

但问题是用户附加文件，我不知道列表会有多长。

在这种情况下，如何对所有'li'元素使用“delete_file”操作？

Answer 1

您可以向元素.delete_file

添加类

<li id="KjG344D">liu-kang.jpg<img src="/images/thrash.gif" class="delete_file"></li>
<li id="3ujRCMB">kitana.jpg<img src="/images/thrash.gif" class="delete_file"></li>
<li id="m3NSxbf">mk2.jpg<img src="/images/thrash.gif" class="delete_file"></li>

使用事件委托

这是为了自动将您的元素与click事件绑定。

$('#attach').on('click', 'li .delete_file', some_function);

Answer 2

您的所有链接都有ID，因此网页上的ID必须是唯一的，因此请使用类。给每个元素一个类，例如class="delete-file"然后将您的触发器设置为类名。

$('.delete-file').on('click', function() {
    //do delete
})

还可以使用.on或.once来附加活动，而不是.click 请参阅其文档here

在您使用.once代替.on或.click时动态添加元素时读取侦听器。那么您不必担心已设置的侦听器，只需重新设置事件

即可

Answer 3

$("input[type=submit]").click(function() {
    $("#list").append("<li class='item'>" + $("#item").val() + "</li>");
    reAssign();
});
function reAssign() {
    $(".item:last-of-type").click(function(index) {
        console.log($(this).text());
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul id="list">

</ul>
<input type='text' id='item'/><br>
<input type='submit' value='Add to List'/>

Answer 4

THank YoU VerRy mUch为您的答案。我解决了这个问题。我学到了一些新知识。创建它作为＆＃39; class＆＃39;并在jquery中使用它使它工作！感谢

如何为多个元素附加onclick操作

4 个答案: