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

我想通过行中包含的复选框/编辑按钮从我的HTML表格行中读取一个ID。该行的ID为“name_id＃”这里是代码：奇怪的代码：JS Console.log（）输出两次不同的输出

$('.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 [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> 
       }

感谢您的帮助！

来源

2011-06-28 Evan Layman

@foreach是什么？ – wong2

@ wong2 - ASP.NET MVC3 Razor View Engine。 –

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

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

来源

2011-06-28 17:13:31 amurra

非常感谢！令人惊叹的是，你所犯的简单错误对于自己来说是如此的挑战:) –

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

以下是详细信息：

当你点击输入按钮，它就会产生很多点击事件，一个给你点击的元素，以及一个用于此元素的每个父母。

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

你也可以为你的div添加一个id然后第二个Console.log将报告这个值！

来源

2011-06-28 17:13:51 dader

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

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

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

来源

2011-06-28 17:15:13 jmbucknall

对不起，我对JS很陌生。你能解释一下错误应该返回的地方吗？这应该在每个JavaScript功能？ –

下面是jsFiddle中的一个例子：http://jsfiddle.net/qP58y/4/ 实质上：return false是停止冒泡到父容器的事件。运行示例并将其注释掉，然后取消注释以查看差异。 – jmbucknall

我明白这个想法是什么，但是当我尝试你的例子时，它仍然有两个警报，返回语句被评论或者没有评论。所有javascript函数都需要这些返回语句吗？ –

在你的按钮和包含它的div上你有相同的类名（“EditButton”）。这意味着jQuery点击处理器被触发两次，点击按钮 - 一次为按钮本身，一次为包含div。

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

来源

2011-06-28 17:15:54

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

回答

相关问题