고유 한 jquery 클릭 문제 - 동일한 요소를 처음 클릭 한 후 시작되지 않음

어디서나 어떤 정보도 볼 수없는 매우 독특한 문제가 발생했습니다. click 이벤트는 첫 번째 클릭 후 요소에서 중단 된 것으로 보입니다 (항상 두 번째는 아니지만 일관성이없는 것처럼 보입니다 - 첫 번째 클릭이 항상 발생 함) - click 이벤트가 작동을 멈추면 두 번 클릭 (이중 클릭이 아닌)으로 클릭 이벤트가 발생합니다. 드롭 다운 메뉴와 유사한 사용하는 페이지로드에고유 한 jquery 클릭 문제 - 동일한 요소를 처음 클릭 한 후 시작되지 않음

, 나는 X 동적으로 생성 된 목록을 채울 수 JSON 문자열을 구문 분석하고 있습니다 :

는 여기에 몇 가지 구체적인이다. 코드에서 각 "드롭 다운 메뉴"가 생성되어 화면에 표시되면 즉시 .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>

사람이 어떻게 더 나은 사용자 경험을 제공하기 위해이 문제를 해결하는 단서가 있습니까?

답변 해 주셔서 감사합니다.

나는 대표자를 들여다 보았지만 (불행히도) 나는 통제 할 수없는 이유로 1.3.2 버전을 사용하고있다.

다른 제안 사항이 있습니까?

출처

2011-09-22 lewie

나는 왜 그런 문제가 발생했는지 알 수 없지만 내가 너라면,이 모든 요소에 동일한 클릭 기능을 바인딩하는 대신 위임 된 클릭 핸들러를 사용할 것입니다.

http://api.jquery.com/delegate/에서 읽으십시오. 문제를 해결하거나 코드 성능을 향상시킬 수 있습니다.)

출처

2011-09-22 22:14:53

고유 한 jquery 클릭 문제 - 동일한 요소를 처음 클릭 한 후 시작되지 않음

답변

관련 문제