独特的jquery点击问题 - 第一次点击相同的元素后停止点燃

我遇到一个相当独特的问题，我没有看到任何信息...任何地方。看起来单击事件在第一次点击后在一个元素上出现故障（并不总是在第二次点击时，似乎没有任何一致性 - 除了第一次点击总是触发） - 一旦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版的理由超出我的控制。

还有其他建议吗？

来源

2011-09-22 lewie

我不能告诉你为什么会出现问题，但如果我是你，我会考虑使用委托单击处理程序，而不是将相同的点击功能绑定到所有这些元素。

尝试阅读http://api.jquery.com/delegate/ - 它可能只是解决您的问题，或者至少让您的代码执行得更好;）

来源

2011-09-22 22:14:53

独特的jquery点击问题 - 第一次点击相同的元素后停止点燃

回答

相关问题