独特的jQuery点击问题-第一次点击同一元素后停止触发

Unique jQuery click issue - stops firing after first click on same element

本文关键字:元素 第一次 jQuery 问题      更新时间:2023-09-26

我遇到了一个相当独特的问题,我没有看到任何关于…的信息。任何地方。似乎在第一次点击之后,点击事件在元素上中断了(不总是在第二次,似乎没有任何一致性-除了第一次点击总是触发)-一旦点击事件停止工作,它需要两次点击(而不是双击)才能触发点击事件。

下面是一些细节:

在页面加载时,我通过一个JSON字符串进行解析,以填充X动态生成的列表,类似于下拉菜单。在代码中,在每个"下拉菜单"生成并显示在屏幕上后,我立即应用.click(function(){

这是可疑的脚本变量"tags"代表一个对象,它基本上是一个下拉菜单的集合。

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

有没有人有任何线索如何解决这个问题,以创造更好的用户体验?


我研究了委托(和live),但不幸的是,由于我无法控制的原因,我不得不使用1.3.2版本。

还有其他建议吗?

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

试着阅读http://api.jquery.com/delegate/-它可能只是解决你的问题,或者至少使你的代码执行得更好;)