Javascript确认对话框需要三次"取消"才能关闭

Question

以下代码产生了这个不寻常的问题:

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

提前致谢!

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

我们在那里.

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

感谢所有回复,顺便说一下.

Answer 1

现在您已经发布了生成的HTML,很明显您已经将jQuery输出放在生成TD元素的循环中.它应该超出该循环,最好是在页面底部!

如果你看一下HTML,你会看到这3次:

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

现在,你可能会说"是的,它被定义了三次,但它不应该执行一次吗？毕竟,我正在重新点击点击处理程序!".好吧,不.jQuery的.click()方法通过将该函数添加到该事件的eventListener列表中,将函数绑定到特定事件.这是事件绑定在Javascript中的一般工作方式.绑定意味着将其添加到列表中.

如果要确保要添加的单击处理程序是元素的唯一单击处理程序,则必须首先使用unbind:

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

而不是这个:

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