Уникальная проблема с кликом jQuery - прекращает работу после первого клика по тому же элементу

У меня довольно уникальная проблема, о которой я не вижу никакой информации... нигде. Кажется, что событие щелчка прерывается на элементе после первого щелчка (не всегда во втором, похоже, нет какой-либо согласованности - кроме того, что всегда срабатывает первый щелчок) - как только событие щелчка перестает работать, требуется два clicks (не двойной щелчок) для запуска события click.

Вот некоторые особенности:

при загрузке страницы я анализирую строку JSON, чтобы заполнить X динамически сгенерированных списков, которые будут использоваться аналогично раскрывающемуся меню. В коде сразу после того, как каждое «выпадающее меню» генерируется и отображается на экране, я применяю .click(function(){...

Вот подозрительный сценарий, в котором переменная «теги» представляет объект, который в основном представляет собой набор раскрывающихся меню.

 $.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 по не зависящим от меня причинам.

Любые другие предложения?


person lewie    schedule 22.09.2011    source источник


Ответы (1)


Я не могу сказать вам, почему возникает проблема, но на вашем месте я бы рассмотрел возможность использования делегированного обработчика щелчков вместо привязки одной и той же функции щелчка ко всем этим элементам.

Попробуйте прочитать на http://api.jquery.com/delegate/ - это может просто решить ваша проблема или, по крайней мере, сделать ваш код лучше;)

person Martin Jespersen    schedule 22.09.2011