Question

您好我已经编写了一个GSP和Javascript代码来执行点击删除文件功能。

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

                       });

                 });
            });

        }

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>

Groovy代码

def deleteSelectedFile() {
        String attachmentId= params.attachmentId
        activitiService.deleteAttachemnt(attachmentId)
    }

我不明白为什么要点击双击删除第一条记录。

请帮帮我。

注意：应用程序正在Internet Explorer中运行。

Answer 1

我认为从[01:33:38] Using gulpfile ~/Projects/gulp-src/gulpfile.js [01:33:38] Starting 'default'... [01:33:38] debug app/src.js [01:33:38] debug app/src.test.js [01:33:38] debug 2 items [01:33:38] Finished 'default' after 19 ms函数中移除$(document).ready(function() {...})部分以及$('.glypeicon-remove')部分，但保持这些内容不会发生，应该解决您的问题。

所以你的代码应该是这样的：

<强> JavaScript的：

remove

希望这有帮助。

Answer 2

问题是，在您的情况下，jQuery事件处理程序仅在第一次单击后才注册，因此在第二次单击时，事件处理程序将被触发。

看起来你正在处理动态元素。在这种情况下，不使用内联事件处理程序，而是使用事件委托并删除内联事件处理程序

<a href="#" class="delete-attachment" data-attachment-id="${file.attachmentId}">

然后

$(document).ready(function(){
    $(document).on('click', '.delete-attachment', function(e){
        e.preventDefault();
        $(this).parent().parent().remove();

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

    });
});

Answer 3

问题是您在函数中绑定了click事件。因为您没有在页面加载时调用该函数，所以它在第一次单击时注册click事件，在第二次单击时，它将被执行。

要解决此问题，您有两种方法可以使用内联处理程序并只调用ajax，不要尝试绑定其中的任何点击：

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

   });
}

并且在视图中你必须在函数中传递this：

<a href="#" onclick="remove('${file.attachmentId}', this)">

第二种方法是使用事件委托语法：

$(static-parent).on(event, selector, callback);

因此，如果您按上述方式更新函数并从视图中删除内联事件处理程序并使用data-*属性。你可以这样使用它：

<a href="#" data-attachmentId='${file.attachmentId}'> 

function remove() {
    var attachmentId = $(this).parent().data('attachmentId');
    $(this).closest('div').remove();
    $.ajax({
       url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
       data: {attachmentId: attachmentId},
        success: function(data){
            alert("Success");
        }

   });
}
$(document).on('click', '.glyphicon-remove', remove);

Answer 4

我不确定它的工作与否，但根据jQuery规则尝试下面的代码。

function remove(attachmentId) {
     $(document).on('click','.glyphicon-remove', 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函数问题

4 个答案: