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>

Answer 2

拥有重复的 ID 值会导致任何 DOM（文档对象模型）操作出现问题。您的问题是如何通过浏览器界面从服务器中正确删除文件。 Groovy 可以利用 Apache Ant 进行文件操作，并且通过使用 AntBuilder 类，您可以简化与文件操作相关的各种任务。

请阅读this entry in the Groovy docs 关于使用 AntBuilder。 并查看 Grails 文档中的服务层以了解如何使用服务。面向服务的体系结构将帮助您保持控制器和域类非常传统，并允许您创建可由多个控制器调用的服务以实现更具体的功能。如果您遵循 Grails 的约定，您的控制器将已经具有 delete 函数。不要在该控制器中添加deleteFile 方法，而是调用定义deleteFile 的服务。

您要删除的代码如下所示：

Create a service for file manipulation（例如项目服务部分下的 FileService.groovy）。在这里您可以放置​​类和函数来删除、添加、压缩文本文件。通过调用 AntBuilder 实用程序，利用 groovy 对 ApacheAnt 的内置支持。

//This is to instantiate an instance of the AntBuilder class.
import groovy.util.AntBuilder

class FileRemover {
    def ant = new AntBuilder() 


    //Define the file, which you will want to pass a value from the page. 
    //You may need to tweak the file path to match your project structure. 

    def file = new File(ant.project.baseDir,
                    "/forms/landing/attachment/${file.attachmentId}")
    def fileName = file.name.toString()
    assert file.exists()

    //Function to remove file
    def fileRemover = file.delete()

    //Provide messaging to let the user know the file has been removed
    println 'File ' + {fileName} + ' has been removed.'
}

此代码需要进行一些个性化更改才能在您的项目中运行，但通过阅读答案中链接的文档并遵循代码的基本思想，您应该能够创建一个删除文件并可以调用的操作来自 GSP 页面。

更新：

要查看用 Grails 编写的文件管理器的简单示例，请阅读 Thomas Lin 的 this blog post。

Answer 3

在普惠制中：

<g:each in="${fileList}" var="file">
            <div>
                <a href="#" onclick="remove('${file.attachmentId}', this)">
                <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, elem) {
    $(elem).parent().remove();
    $.ajax({
       url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
       data: {attachmentId: attachmentId},
        success: function(data){
            alert("Success");
        }

   });
}

这样就可以完美解决问题了。