Question

我遇到了一个相当独特的问题，我在任何地方都没有看到任何信息。似乎点击事件在第一次点击后分解元素（并不总是在第二次点击，似乎没有任何一致性 - 除了第一次点击总是触发） - 一旦点击事件停止工作，它需要两个单击（不是双击）要触发的click事件。

以下是一些细节：

在页面加载时，我正在解析JSON字符串以填充X动态生成的列表，类似于下拉菜单。在代码中，在每个“下拉菜单”生成并显示在屏幕上之后，我立即应用.click（function（）{...

这是可疑的脚本变量“tags”表示一个Object，它基本上是下拉菜单的集合。

 $.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。

还有其他建议吗？

Answer 1

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

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

唯一的jquery点击问题 - 首次点击同一元素后停止触发

1 个答案: