Javascript 确认对话框需要点击 3 次 "cancel"才能关闭

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() 方法通过将该函数添加到该事件的 eventListeners 列表来将该函数绑定(bind)到特定事件。这就是事件绑定(bind)在 Javascript 中的一般工作方式。绑定(bind)意味着将其添加到列表中。

如果您想确保添加的点击处理程序是元素的唯一点击处理程序，则必须使用 unbind第一:

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

而不是这个:

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