Проблема с функцией onclick

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

Проблема в том, что вы связали событие click в функции. Поскольку вы не вызывали эту функцию при загрузке страницы, она регистрирует событие щелчка при первом щелчке и при втором нажатии, оно выполняется.

Чтобы преодолеть эту проблему, у вас есть два пути либо просто использовать свой встроенный обработчик и просто называют Аякса, не пытайтесь связать любой щелчок в нем:

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

поэтому, если вы обновите свою функцию, как указано выше, и удалите обработчик события inline из представления и используйте атрибут 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 2

Я думаю, удаляя $(document).ready(function() {...}) части, а также $('.glypeicon-remove') части из функции 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'); } 
    }); 
} 

Надеется, что это помогает.

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

    }); 
}); 

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