奇怪的代碼：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（）輸出兩次不同的輸出

回答

相關問題