Question

我试图通过行中包含的复选框/编辑按钮从我的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 patchID是：NaN

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

这是我的表行的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>
                }

感谢您的帮助！

Answer 1

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

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

Answer 2

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

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

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

Answer 3

您的班级名称出现两次，而另一名出现。我的意思是你只需从div的元素中删除class =“EditButton”和class =“SaveButton”！

以下是更多详情：

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

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

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

Answer 4

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

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

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

4 个答案: