트위터 부트 스트랩 드롭 다운 사용자 정의

트위터 부스트랩 드롭 다운 플러그인을 사용하여 편집 가능한 드롭 다운을 사용하려고합니다. 지금 내가 가지고있는 경우이 : http://jsfiddle.net/U9L2J/3/트위터 부트 스트랩 드롭 다운 사용자 정의

내가 (<i class="icon-pencil"></i> 및 <i class="icon-remove"></i>로)리스트의 각 요소의 오른쪽에있는 연필 아이콘과 삭제 아이콘을 넣어 싶지. 이 아이콘을 클릭하면 이벤트가 트리거됩니다. 그래서이 아이콘을 클릭하면 요소의 확인란을 선택하면 안됩니다. 내가 시도한 모든 것들이 목록의 CSS를 완전히 파괴했습니다 ...

아이디어가 있으십니까?

출처

2012-12-12 Antoine

예제와 관련해서는 "이 아이콘을 클릭하면 요소의 체크 박스를 선택하면 안됩니다." –

jsfiddle을 업데이트했습니다. 더 나아 졌습니까? 문제가 더 명확한가요? – Antoine

을 방지, 당신은) (CSTE 연구진 사용하여 그들을지도해야

$(".icon-remove").on("click", function(e){ 
    alert('clicked'); 
    e.preventDefault(); 
});

Your Updated Fiddle

편집 : 코드 수정 :

$("#layers-dropdown >.layers").on("click","li a label i.icon-remove", function(e){ 
     alert('clicked'); 
    e.preventDefault(); 
});

Updated Fiddle with dynamic functionality

출처

2012-12-12 21:30:11 TNCodeMonkey

새 레이어를 동적으로 추가하면 함수가 새 아이콘에 바인딩되지 않으므로 요소를 추가 할 때마다 수동으로 바인딩해야합니까? 나는 "on"이라고 생각하면 자동으로 ... – Antoine

아니요, 자동으로 바인딩됩니다. .on() – TNCodeMonkey

@Antoine ahhh, 당신이 말하는 것을 봅니다. 나는 지금 그것을 조사하고있다. – TNCodeMonkey

preventDefault를 사용하여 체크 박스가 선택되지 않도록합니다.

$("i").click(function(e){ 
    e.preventDefault(); 
    // some code here - do your thing! 
});

는 http://jsfiddle.net/PcjNz/

은 물론, 당신은 아마 다른 아이콘에 다른 클릭 이벤트를 바인딩해야 참조하십시오. 이 예는 확인되는 체크 박스 ... 클릭 이벤트를 처리 할 수있는 사람들을 위해

출처

2012-12-12 21:29:29

좋아요! 감사 ! – Antoine

이것은 동적 내용 바인딩을 처리하지 않습니다. .click() 이벤트는 현재 페이지에있는 요소 만 바인딩합니다. 여기서 찾고있는 것은 미래에 동적으로 추가 된 요소에 바인딩하는 .on/live/etc입니다. – TNCodeMonkey

사실 내 주요한 문제는 동적 바인딩이 아니었지만 체크 대상인 체크 박스가 표시되지 않게하는 것입니다. – Antoine

트위터 부트 스트랩 드롭 다운 사용자 정의

답변

관련 문제