+-
奇怪的代码: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')将使divinput.EditButton类匹配。 input给您63,而div给您NaN,因为它没有id属性。

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

2
投票

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

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

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

1
投票

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

这里有更多详细信息:

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

由于您使用$将所有具有相同类名的元素都影响到事件,并且其中两个元素彼此相同,因此事件将被触发两次。

您还可以在两个div中都添加一个ID,然后第二个Console.log将报告此值!

0
投票

您在按钮和包含它的div上都具有相同的类名(“ EditButton”)。这意味着jQuery单击处理程序将被触发两次以单击该按钮-一次是按钮本身,一次是为包含div

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