2011-09-22 20 views
1

我遇到一個相當獨特的問題,我沒有看到任何信息...任何地方。 看起來單擊事件在第一次點擊後在一個元素上出現故障(並不總是在第二次點擊時,似乎沒有任何一致性 - 除了第一次點擊總是觸發) - 一旦click事件停止工作,它需要兩次點擊(不是雙擊)讓點擊事件觸發。獨特的jquery點擊問題 - 第一次點擊相同的元素後停止點燃

這裏有一些細節:

在頁面加載,我通過一個JSON字符串來填充X動態生成的列表解析中使用類似下拉菜單。在代碼中,在每個「下拉菜單」生成並顯示在屏幕上後,立即應用一個.click(函數(){...

這裏是可疑腳本 變量「標籤」代表一個對象這基本上是下拉菜單的集合。

$.each(tags, function(k, v){ 
v.display('div#tags'); 
var selector = '#' + v.getId(); 
if(v.isTabled()){ 
    selector += ' tr.Option td'; 
}else{ 
    selector += ' .Option'; 
} 

var narrowedProducts = []; 

$(selector).click(function(){ 
    $.each($('div.Select'), function(i,e){ 
     var temp = $(this).children('input').attr('value'); 
     narrowedProducts = Row.narrowProducts(temp.split('-'), narrowedProducts); 
    }); 

    if(narrowedProducts.length === 1){ 
     $('input#THEPRODUCT') 
      .attr('name', narrowedProducts[0]) 
      .attr('value', narrowedProducts[0]) 
    }else if(narrowedProducts.length === 0){ 

     $('input#THEPRODUCT') 
      .removeAttr('name') 
      .removeAttr('value') 
    }else{} 

    narrowedProducts = []; return; 
}); 
}); 

和下拉式菜單中的HTML ...

<div id="tags"> 
    <input type="input" id="THEPRODUCT" /> 

    <div class="Select Select-sizechart" id="sizechart"> 
    <span class="Display">Select a sizechart:</span><input type="hidden" name= 
    "sizechart" /> 

    <table class="Selectable"> 
     <tbody> 
     <tr class="TableHeading"> 
      <th>Size</th> 

      <th>Comparable Size</th> 

      <th>Bust</th> 

      <th>Hip</th> 

      <th>Back Length</th> 
     </tr> 

     <tr class="Option" rel="L" id="68435-68414-68416-68423"> 
      <td>L</td> 

      <td>16-18</td> 

      <td>43"-45"</td> 

      <td>45"-47"</td> 

      <td>43"</td> 
     </tr> 

     <tr class="Option" rel="XL" id="68432-68437-68419-68428"> 
      <td>XL</td> 

      <td>20-22</td> 

      <td>47"-49"</td> 

      <td>49"-51"</td> 

      <td>44"</td> 
     </tr> 

     <tr class="Option" rel="S" id="68433-68420-68425-68431"> 
      <td>S</td> 

      <td>8-10</td> 

      <td>36"-37"</td> 

      <td>38"-39"</td> 

      <td>41"</td> 
     </tr> 

     <tr class="Option" rel="XS" id="68436-68417-68424-68429"> 
      <td>XS</td> 

      <td>4-6</td> 

      <td>34"-35</td> 

      <td>36"-37"</td> 

      <td>40"</td> 
     </tr> 

     <tr class="Option" rel="M" id="68415-68418-68421-68427"> 
      <td>M</td> 

      <td>12-14</td> 

      <td>38.5"-40.5"</td> 

      <td>40.5"-42.5"</td> 

      <td>42"</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 

    <div class="Select Select-color" id="color"> 
    <span class="Display">Select a color:</span><input type="hidden" name="color" /> 

    <div class="Selectable"> 
     <div class="Option" rel="River" id="68435-68418-68420-68424-68428"> 
     River 
     </div> 

     <div class="Option" rel="Smoke" id="68432-68433-68414-68415-68417"> 
     Smoke 
     </div> 

     <div class="Option" rel="Punch" id="68436-68419-68423-68427-68431"> 
     Punch 
     </div> 

     <div class="Option" rel="Sandstone" id="68437-68416-68421-68425-68429"> 
     Sandstone 
     </div> 
    </div> 
    </div> 
</div> 

沒有任何人有任何線索如何解決這個問題創造更好的用戶體驗?


感謝您的回答!

我看着代表(和生活),但不幸的是,我被綁定到使用1.3.2版的理由超出我的控制。

還有其他建議嗎?

回答

1

我不能告訴你爲什麼會出現問題,但如果我是你,我會考慮使用委託單擊處理程序,而不是將相同的點擊功能綁定到所有這些元素。

嘗試閱讀http://api.jquery.com/delegate/ - 它可能只是解決您的問題,或者至少讓您的代碼執行得更好;)

相關問題