jQuery on() 선택기 지원이 필요합니다.

jQuery를 이해하는 데 몇 가지 문제가 있습니다.jQuery on() 선택기 지원이 필요합니다.

jquery를 통해 생성 된 동적 Li 요소가있는 UL이있는 경우 첫 번째 li에 클래스가 선택되도록 설정합니다 (예 :

<li class='selected'>text</li>

편집 UDPATE :

내가 뭘해야하는 동적 텍스트 상자에서 생성 된 REST 호출에서 동적으로 생성 된 LI의 집합입니다 Ok..so

. 내가해야 할 일은 본질적으로 (keyup)을 입력 한 후에 자동 완성과 비슷한 결과가 표시됩니다. 그런 다음 검색 상자의 컨텍스트 내에서 위쪽 화살표와 아래쪽 화살표를 감지하고 ".selected"클래스를 트리 위아래로 이동해야합니다. 아래의 코드는 정적 목록에 대해서는 작동하지만 동적 목록에 대해서는 작동하지 않습니다.

몇 가지 예제 코드 :

$('.txtSearchBox') 
.unbind('keypress keyup') 
.bind('keypress keyup', function (e) { 
    if ($(this).val().length < 3 && e.keyCode != 13) { 
     $('.searchWrapper').hide(); 
    } else { 
     $('.searchWrapper').show(); 
     SearchAutoComplete.init($('.searchWrapper')); 
     SearchAutoComplete.load(); 
    } 

    if (e.keyCode == 38) { // up 
     var selected = $(".selected"); 
     $(".searchWrapper li").removeClass("selected"); 
     if (selected.prev().length == 0) { 
      selected.parent().children().last().addClass("selected"); 
     } else { 
      selected.prev().addClass("selected"); 
     } 
    } 
    if (e.keyCode == 40) { // down 
     var selected = $(".selected"); 
     $(".searchWrapper li").removeClass("selected"); 
     if (selected.next().length == 0) { 
      selected.parent().children().first().addClass("selected"); 
     } else { 
      selected.next().addClass("selected"); 
     } 
    } 
}); 

$(".searchWrapper li").live('mouseover', function (e) { 
    $(".searchWrapper li").removeClass("selected"); 
    $(this).addClass("selected"); 
});

이 코드는 위쪽 및 아래쪽 화살표 키를 감지 볼 수 있듯이. 문제는 동적 요소에 대한 것입니다. 임박한 이벤트가 리가 아니야 혼란스러워?

감사

크리스

출처

2012-08-25 kalabo

두 사람이'on()'을 사용하는 방법을 보여 줬습니다. 핵심 프레싱 이벤트에 지식을 적용하십시오. – Owlvark

이 시도 :

$(".searchWrapper ul").on('mouseover',"li", function() { 
    $(".searchWrapper li").removeClass("selected"); 
    $(this).addClass("selected"); 
});

를 JQuery와 docs에서 당신이 on() 기능 ("리")에 대한 선택을 제공 할 때 이벤트 처리기가 위임된다.

출처

2012-08-25 23:10:32 Samson

이것은 당신이 무엇을 의미합니까? DEMO

each을 사용하면 원하는대로 요소를 반복하고 조작 할 수 있습니다. 모든 I는 리튬 태그를 반복하고 '선택'클래스를 제거하고있는 중이 야 위의 코드와

$('ul.alist li').on('click', function(){ 

jQuery.each($('ul.alist li'), function() { 
    $(this).removeClass('selected'); 

}); 
});

출처

2012-08-25 23:08:26 effectica

jQuery on() 선택기 지원이 필요합니다.

답변

관련 문제