Javascript confirmation dialog box takes three clicks of "cancel" to close.

Question

The following code is guilty of generating this unusual problem:

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

Thanks in advance!

Here's the 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>

There we are.

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

Thanks for all the responses, btw.

Answer 1

I made this test page using the info you supplied. It doesn't exhibit this behavior. (I added TRs, but it doesn't make a difference - it worked normally before, too).

What differs between your own test page and this example?

<html>
  <head>
    <script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js'&gt;
    </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 2

Now that you've posted the generated HTML, it's plain to see that you've put the jQuery output inside the loop that generates your TD elements. It should go outside that loop, preferably at the bottom of the page!

If you look at the HTML, you'll see this 3 times:

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

Now, you might say "yeah, it's defined three times, but shouldn't it still execute once? After all, I'm redeclaring the click handler!". Well, no. jQuery's .click() method binds a function to a particular event by adding that function to the list of eventListeners for that event. This is how event binding works in general in Javascript. Binding means add it to the list.

If you want to make sure the click handler you are adding is the ONLY click handler for a element, you'd have to use unbind first :

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

instead of this:

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

Answer 3

BINGO ~ you only need to call the event binder ONCE!

you are doing it three times.

bottom of the page should only have one script block

Also:

when you do this:

$t = $(this);

that query is now stored in $t so you can reuse it.

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

can just use the stored result set

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

Good Luck.