javascript - GSP 中的 Onclick 删除功能问题

Question

在 GSP 中，我编写了这样的代码，它将显示文件列表:

       <g:each in="${fileList}" var="file">
            <div>
                <a href="#" onclick="remove('${file.attachmentId}')"> 
                <span class="glyphicon glyphicon-remove"></span></a> 
                <a href="/forms/landing/attachment/${file.attachmentId}" >${file.name}</a> 
                </br>
            </div>
        </g:each>

我的 JavaScript 代码是:

function remove(attachmentId) {
$(document).ready(function(){
        $('.glyphicon-remove').click ( function(e){
            e.preventDefault();
            $(this).parent().parent().remove();

            $.ajax({
                       url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
                        data: {
                                attachmentId: attachmentId
                        },
                        success: function(data){
                                alert("Success");
                        }

                   });

             });
        });

    }

我正在调用 onclick remove() 函数，并将选定的 AttachmentId 作为参数传递。第一次双击后才删除文件。

为什么第一次双击后才删除文件？

感谢您提前提供的帮助。

注意:应用程序在 IE 中运行。

Answer 1

自从这个标签

<div id="remove">

出现在 g:each 标签内，您正在同一页面中创建多个 id。当函数remove()被调用时，它会删除所有发现“remove”作为id的div。让每个 id 都是唯一的，这样就可以解决问题

由于您使用的是 jQuery，请尝试使用此代码。这将消除唯一 ID 的使用。

<script>
        $(document).ready(function(){
            $('.glyphicon-remove').click ( function(e){
                e.preventDefault();
                $(this).parent().parent().remove();
            });
        });
    </script>