JQuery＆Javascript：Intermittant錯誤匹配的點擊div和返回的div？

謝謝你給這個看看。我將從一個快速的圖像開始。點擊任何紅色框搜索結果似乎會返回正上方的項目<div>。JQuery＆Javascript：Intermittant錯誤匹配的點擊div和返回的div？

在這裏，我點擊了1613 CAROUSEL CIR，但該事件返回的ID /內容爲代表1612..

enter image description here

的項目有時甚至怪異，例如，每個項目下面1420可能指向回1420。所以這是並不總是與<div>衝突，它是直接的鄰居，雖然通常是這樣。

我一直無法在此行爲中找到任何明確的模式。有時它只是列表中的一個或兩個項目;有時候大多數列表都會受到影響，結果的「很大一部分」指向一個特定的div。

只有一個真正的一致性 - 通常前幾個項目按預期工作，短列表將100％正確。但是，很長的列表（50+）是不超過半長名單（20+）一定更差..：/

代碼建立了由一個jQuery $.ajax()呼叫檢索JSON數據搜索結果進行迭代，這是相關代碼構建可見的搜索結果：

if(result.d.length > 0) 
{ 
    var i=0; 
    for(i; i<result.d.length; i++) 
    { 
     // ..there's a bunch of irrelevant code here to set the map bounds.. 
     // ..then I build the HTML using JQuery like this 
     // 
     var date = new Date(); 
     var divID = "searchItemDiv" + date.getTime().toString(); 
     var $searchItemDiv = $("<div id='" + divID + "' class='searchItemDiv'>"+result.d[i].Description+"</div>"); 
     $searchItemDiv.data('itemData', result.d[i]); 
     $searchItemDiv.bind('click', onSearchItemClick); 
     $("#searchResults").append($searchItemDiv); 
    } 
}

雖然我不懷疑事件處理程序的問題，相關的代碼有如下：

function onSearchItemClick(event) 
{ 
    if(event.target.id.toString() !== '') 
    { 
     // I clicked 1613, but event returned DIV with text of "1612"?? 
     // 
     var item = $('#'+event.target.id.toString()).data('itemData'); 

     alert(event.target.id.toString()+"\n"+ 
       $('#'+event.target.id.toString()).text()); 

     // ..more irrelevant stuff to show a popup of property data.. 
    } 
}

火狐，Chrome和IE全部展示相同的行爲，所以它不是特定於瀏覽器的。

我是相對確定在呈現階段，這不是race condition的產物，但我對使用JavaScript知道某些事情並不舒服。

我對此很困惑。 FWIW，我是一位前C＃開發人員，也是JavaScript/JQuery開發相對較新的，因此可能會有一個問題，我正在介入的相關JavaScript上下文和/或JQuery。

來源

2014-04-22 elrobis

你仔細檢查了JSON以確保沒有重複的值嗎？ –

這幾乎就好像DIV元素的一個隱藏部分延伸到它下面的結果頂部，但如果我打開邊界/背景渲染，我沒有看到任何證據。 – elrobis

hmm，似乎很奇怪，如果你在處理程序中使用'this'，你會得到相同的行爲嗎？例如'this.id'或'$（this）.text（）' – Homungus

我會說，代替在for循環中綁定click函數，只需在for-loop將數據綁定到它們之後選擇所有searchItemDiv，並在所有對象上註冊一個click函數。您不需要單獨的一行來定義變量i，只需在for語句中執行即可。我也不會嘗試用新的Date生成隨機ID，這似乎沒有必要。註冊所有的點擊功能，同時也將讓你的點擊處理程序要簡單得多：

if(result.d.length > 0) 
{ 
    for(var i = 0; i<result.d.length; i++) 
    { 
     // ..there's a bunch of irrelevant code here to set the map bounds.. 
     // ..then I build the HTML using JQuery like this 

     // select the i'th searchItemDiv 
     $searchItemDiv = $($('.searchItemDiv')[i]) 
     // give it the data 
     $searchItemDiv.data('itemData', result.d[i]); 
     $("#searchResults").append($searchItemDiv); 
    } 

    // then register all the click handlers at once, very simple 
    $('.searchItemDiv').bind('click', function() { 
     var item = $(this); 
     alert(item.text()); 
    }); 
}

- 編輯 -

也，做了searchItemDiv s已存在，或者是你想創建它們？

如果你想創建它們，你可能會在for循環，而不是想這樣的：

for(var i = 0; i<result.d.length; i++) 
{ 
    // ..there's a bunch of irrelevant code here to set the map bounds.. 
    // ..then I build the HTML using JQuery like this 

    // create a searchItemDiv 
    $searchItemDiv = $('<div class="searchItemDiv"></div>') 
    // give it the data 
    $searchItemDiv.data('itemData', result.d[i]); 
    $("#searchResults").append($searchItemDiv); 
}

我猜這是你想要做什麼。

來源

2014-04-22 17:01:12 jshanley

+1這絕對是對代碼的幾處改進。不過，我想首先排除'id'時間作爲競賽條件。我會用你暗示的想法來讓'我'成爲唯一的價值，看看這是否有用。 – elrobis

我想我誤解了您的原始代碼，請參閱我編輯的編輯 – jshanley

是的，「id」一直是問題。使用'i'值足以解決它。我現在感覺就像是一個盲人傻瓜，現在首先使用這個價值！我做了什麼，添加了一個沉重的'Date（）'暴徒，並且調用了'getTime（）'。哇，現在這個謎已經結束了。大聲笑謝謝你的幫助。我肯定會實現類綁定，而不是每個對象的綁定。謝謝！ – elrobis

我認爲你的問題取決於你的searchItemDiv ID。

使用日期不能確保ID是唯一的，所以當你通過ID檢索對象它將返回具有相同ID的元素（可能是第一個）。

確保在您的元素上分配唯一的ID。

來源

2014-04-22 17:06:53 dogiordano

JQuery＆Javascript：Intermittant錯誤匹配的點擊div和返回的div？

回答

相關問題