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，你会看到这三次：

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

Answer 2

BINGO~你只需要调用事件活页夹！

你正在做三次。

页面底部应该只有一个脚本块

此外：

当你这样做时：

$t = $(this);

该查询现在存储在$ t中，因此您可以重复使用它。

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

可以使用存储的结果集

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

祝你好运。

Answer 3

我使用您提供的信息制作了此测试页。它没有表现出这种行为。（我添加了TR，但它没有什么区别 - 它之前也正常工作）。

您自己的测试页与此示例有何不同？

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

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

3 个答案: