奇怪的代码：JS Console.log() 输出两次，输出不同答案

【问题标题】：Strange Code: JS Console.log() outputs twice with different output奇怪的代码：JS Console.log() 输出两次，输出不同
【发布时间】：2011-09-24 12:27:54
【问题描述】：

我正在尝试通过行中包含的复选框/编辑按钮从我的 html 中的表行中读取 ID。该行的 id 为“name_id#” 这是代码：

$('.EditButton').click(function edit() {
        var patchID = parseInt($(this).attr('id').slice(5));
        console.log("patchID is : " + patchID.toString());
...
});

我尝试过使用子字符串和切片，但没有使用 parseInt。一切似乎都正确地获取了 ID 号，但是当我记录它时，它会输出：

patchID 是：63 补丁ID是：NaN

我的代码有什么问题吗？当我尝试使用带有 ID 的 jquery "get" 时，它可以工作，但它也会引发错误，因为它尝试使用 ID # 和 "NaN" 来 "get"。

这是我的表格行的 html：

@foreach (var patch in patches)
                {
                    <tr id=@string.Format("patch_{0}", patch.PatchID)>
                      <td>
                            <div class="EditButton">
                                <input type="button" class="button EditButton" 
                                       value="" 
                                       id=@string.Format("edit_{0}", patch.PatchID) />
                            </div>
                            <div class="SaveButton">
                                <input type="button" class="button SaveButton hidden" 
                                       value=""
                                       id=@string.Format("save_{0}", patch.PatchID) />
                            </div>
                        </td>
                    </tr>
                }

感谢您的帮助！

【问题讨论】：

@wong2 - ASP.NET MVC3 Razor 视图引擎。

标签： jquery asp.net-mvc-3 console razor

【解决方案1】：

$('.EditButton') 将匹配div 和input 与.EditButton 类。 input 给你 63，而 div 给你 NaN，因为它没有 id 属性。

我会从 div 中删除 .EditButton 类（除非你有它的样式），以防止点击处理程序被调用两次。

【讨论】：

非常感谢！令人惊讶的是，你犯的简单错误对你来说是一个挑战:)

【解决方案2】：

这里发生了几件事。首先，您将 EditButton 类应用于包含 div 和输入按钮字段。所以，两者都会得到一个点击事件处理程序。

接下来，您只需在按钮本身上设置id。

接下来我猜你并没有告诉 JavaScript 你已经处理了这个事件（通常返回false），所以它在包含链中冒泡。首先是按钮处理点击，然后是 div 容器。

【讨论】：

对不起，我对 JS 很陌生。你能解释一下 return false 应该去哪里吗？应该在每个javascript函数中吗？
这里是 jsFiddle 中的一个例子：jsfiddle.net/qP58y/4 本质上：return false 是为了阻止事件冒泡到父容器。运行示例，将其注释掉，然后将其取消注释以查看差异。
我明白这个想法是什么，但是当我尝试您的示例时，它仍然有两个警报，返回语句已评论或未评论。所有 javascript 函数都需要这些返回语句吗？
更改后是否单击了运行？更改 JavaScript 不会导致重新加载小提琴。仅在事件处理程序中需要返回 false 以确保事件不会在链中冒泡到其父级。一般的 JavaScript 函数当然不需要你返回 false。（例如，jQuery 函数返回一个 jQuery 集合。）
更改后我没有点击运行。谢谢。现在它起作用了。我应该知道它不会被重新加载，我只是没有花时间寻找答案；）。感谢您的所有帮助。

【解决方案3】：

你的类名出现两次，一个在另一个。我的意思是你只需要从 div 的元素中删除 class="EditButton" 和 class="SaveButton" ！

这里有更多细节：

当你点击输入按钮时，它会触发很多点击事件，一个针对你点击的元素，一个针对这个元素的每个父元素。

由于您使用 $ 将事件影响到共享一个共同类名的所有元素，并且您有两个这些元素一个接一个，因此该事件将被触发两次。

你也可以给你的两个 div 添加一个 id，然后第二个 Console.log 会报告这个值！

【讨论】：

【解决方案4】：

您的按钮和包含它的div 具有相同的类名（“EditButton”）。这意味着 jQuery 单击处理程序会为单击按钮而触发两次 - 一次用于按钮本身，一次用于包含 div。

要解决此问题，您可以从父 div 中删除或更改类，或检查事件处理函数中的 event.target，以查看是否单击了按钮。

【讨论】：