boîte de dialogue de confirmation Javascript prend trois clics de « annuler » pour fermer

Question

Le code suivant est coupable de générer ce problème inhabituel:

<script type="text/javascript"> 
       $(document).ready(function() { 
        $('.deleteRow').click(function (event) { 
         event.preventDefault(); 
         if (confirm('Delete?')) { 
          var $t = $(this); 
          $.post($(this).attr('href'), function (data) { 
           if (data) { 
            $t.parent().parent().remove(); 
           } 
          }); 
         } 
         return false; 
        }); 
       }); 
      </script> 

Merci à l'avance!

Voici le HTML:

<td> <%= Html.ActionLink("<-Delete", "Delete", new {quoteID = quote.QuoteID}, new {@class= "deleteRow"}) %></td> 

<td> <a class="deleteRow" href="/Quote/Delete/56">&lt;-Delete</a></td> 

Il nous.

<tbody> 

     <tr> 
      <td> 
       <p> 
    asd</p> 
&lt;div firebugversion=&quot;1.5.4&quot; id=&quot;_firebugConsole&quot; style=&quot;display: none;&quot;&gt; 

    &amp;nbsp;&lt;/div&gt; 
&lt;br /&gt; 

      </td> 
      <td> 
       2345 
      </td> 
      <td> 
       7/28/2010 3:26:10 PM 
      </td> 

      <td> <a class="deleteRow" href="/Quote/Delete/56">&lt;-Delete</a></td> 
      <script type="text/javascript"> 
       $(document).ready(function() { 
        $('.deleteRow').click(function (event) { 
         event.preventDefault(); 
         event.stopPropagation(); 
         if (confirm('Delete?')) { 
          var $t = $(this); 
          $.post($(this).attr('href'), function (data) { 
           if (data) { 
            $t.parent().parent().remove(); 
           } 
          }); 
         } 
         return false; 
        }); 
       }); 
      </script> 

     </tr> 

     <tr> 
      <td> 
       Now is the time for all good men to come to the aid of their parties. 
      </td> 

      <td> 

      </td> 
      <td> 
       7/6/2010 10:13:44 PM 
      </td> 
      <td> <a class="deleteRow" href="/Quote/Delete/2">&lt;-Delete</a></td> 
      <script type="text/javascript"> 
       $(document).ready(function() { 
        $('.deleteRow').click(function (event) { 
         event.preventDefault(); 
         event.stopPropagation(); 
         if (confirm('Delete?')) { 
          var $t = $(this); 
          $.post($(this).attr('href'), function (data) { 
           if (data) { 
            $t.parent().parent().remove(); 
           } 
          }); 
         } 
         return false; 
        }); 
       }); 
      </script> 

     </tr> 

     <tr> 
      <td> 
       I&#39;m a loser 
      </td> 
      <td> 
       146 
      </td> 
      <td> 

       7/6/2010 9:11:42 PM 
      </td> 
      <td> <a class="deleteRow" href="/Quote/Delete/1">&lt;-Delete</a></td> 
      <script type="text/javascript"> 
       $(document).ready(function() { 
        $('.deleteRow').click(function (event) { 
         event.preventDefault(); 
         event.stopPropagation(); 
         if (confirm('Delete?')) { 
          var $t = $(this); 
          $.post($(this).attr('href'), function (data) { 
           if (data) { 
            $t.parent().parent().remove(); 
           } 
          }); 
         } 
         return false; 
        }); 
       }); 
      </script> 

     </tr> 

    </tbody> 

Merci pour toutes les réponses, btw.

Answer 1

Maintenant que vous avez posté le code HTML généré, il est évident de voir que vous avez mis la sortie jQuery dans la boucle qui génère vos éléments de TD. Il devrait sortir de cette boucle, de préférence en bas de la page!

Si vous regardez le code HTML, vous verrez ce 3 fois:

<script type="text/javascript"> 
       $(document).ready(function() { 
        $('.deleteRow').click(function (event) { 
         event.preventDefault(); 
         event.stopPropagation(); 
         if (confirm('Delete?')) { 
          var $t = $(this); 
          $.post($(this).attr('href'), function (data) { 
           if (data) { 
            $t.parent().parent().remove(); 
           } 
          }); 
         } 
         return false; 
        }); 
       }); 
      </script> 

Maintenant, vous pourrait dire « oui, il est défini trois fois, mais il ne doit pas exécuter encore une fois? Après tout, je suis en train de redécouvrir le gestionnaire de clic! ". Et bien non. La méthode .click() de jQuery lie une fonction à un événement particulier en ajoutant cette fonction à la liste des eventListeners pour cet événement. C'est ainsi que la liaison d'événements fonctionne en général en Javascript. La liaison signifie l'ajouter à la liste.

Si vous voulez vous assurer que le gestionnaire de clic que vous ajoutez est le gestionnaire uniquement clic pour un élément, vous auriez à utiliser unbind d'abord:

$('.deleteRow').unbind('click').click(function (event) { // rest of code... 

au lieu de ceci:

$('.deleteRow').click(function (event) { // rest of code... 

Answer 2

J'ai fait cette page de test en utilisant les informations que vous avez fournies. Il n'a pas ce comportement. (J'ai ajouté TR, mais ça ne fait pas de différence - ça fonctionnait normalement avant, aussi). Ce qui diffère entre votre propre page de test et cet exemple?

<html> 
    <head> 
    <script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js'> 
    </script> 
    <script type="text/javascript"> 
      $(document).ready(function() { 
       $('.deleteRow').click(function (event) { 
        event.preventDefault(); 
        if (confirm('Delete?')) { 
         var $t = $(this); 
         $.post($(this).attr('href'), function (data) { 
          if (data) { 
           $t.parent().parent().remove(); 
          } 
         }); 
        } 
        return false; 
       }); 
      }); 
     </script> 

    </head> 
    <body> 
    <table> 
     <tr><td> <a class="deleteRow" href="/Quote/Delete/56">&lt;-Delete</a></td></tr> 
     <tr><td> <a class="deleteRow" href="/Quote/Delete/56">&lt;-Delete</a></td></tr> 
     <tr><td> <a class="deleteRow" href="/Quote/Delete/56">&lt;-Delete</a></td></tr> 
    </table> 
    </body> 
</html> 

Answer 3

BINGO ~ vous n'avez besoin d'appeler le classeur d'événement qu'une fois!

vous le faites trois fois.

bas de la page doit avoir un seul bloc de script

également:

quand vous faites ceci:

$t = $(this); 

cette requête est maintenant stockée dans $ t afin que vous puissiez le réutiliser.

$.post($(this).attr('href'), function (data) { 

peut simplement utiliser le résultat stocké mis

$.post($t.attr('href'), function (data) { 

Bonne chance.