onclick功能的问题

Issue with onclick function

本文关键字：问题 功能 onclick      更新时间：2023-09-26

我写了一个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中运行

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

我认为从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'); }
    });
}

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

我不确定它的工作与否，但根据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");
         }
   });
});        
}
相关文章：