onclick 功能问题答案

【问题标题】：Issue with onclick functiononclick 功能问题
【发布时间】：2015-07-30 09:37:17
【问题描述】：

您好，我已经编写了一个 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");
                            }

                       });

                 });
            });

        }

普惠制代码

               <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 中运行。

【问题讨论】：

您在另一个看起来不正确的点击处理程序中有一个点击处理程序！

标签： javascript jquery ajax grails

【解决方案1】：

问题是您在函数中绑定了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);

【讨论】：

非常感谢 Jai，您的第一个解决方案为我解决了。我只是将 parent().parent() 更改为 parent() 以使其完美。非常感谢。
很高兴这对您有所帮助。

【解决方案2】：

我认为从remove 函数中删除$(document).ready(function() {...}) 部分和$('.glypeicon-remove') 部分，但保持这些内容内部发生的内容不受影响，应该可以解决您的问题。

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

JavaScript：

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

希望这会有所帮助。

【讨论】：

【解决方案3】：

问题是，在您的情况下，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");
        }

    });
});

【讨论】：

嗨阿伦，我什至也试过这个。但这里的问题是我如何准确地传递所需的参数“attachmentId”。现在我将它作为 onclick=remove("attachmentId") 传递。如果我删除此代码，我将无法传递 attachmentId 对吗？
很抱歉，这个解决方案也不适合我。现在该文件没有被删除。注意：应用程序在 IE10 中运行。

【解决方案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");
         }
   });
});        
}

【讨论】：