奇怪的代码：JS Console.log（）输出两次，但输出不同

我正在尝试通过该行中包含的复选框/编辑按钮从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为：63patchID为：NaN

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

这里是我的表格行的html：

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

感谢您的帮助！

4
投票

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

我将从div中删除.EditButton类（除非您具有样式设置，以防止两次单击该单击处理程序。

2
投票

这里发生了几件事。首先，您将EditButton类同时应用于包含div和输入按钮字段。因此，两者都将获得click事件处理程序。

下一步，您仅在按钮本身上设置id。

接下来，我想您不是在告诉JavaScript您已经处理了该事件（通常返回false），因此它正在整个容纳链中冒泡。首先，按钮处理点击，然后处理div容器。

1
投票

您的类名出现了两次，彼此之间是一个。我的意思是，您只需要从div的元素中删除class =“ EditButton”和class =“ SaveButton”！

这里有更多详细信息：

[单击输入按钮时，它将触发许多单击事件，一个事件用于单击的元素，另一个事件用于此元素的每个父元素。