동적으로 추가 된 semanctic UI 확인란/라디오/등급 이벤트가 실행되지 않음

Question

동적으로 추가 된 체크 박스/라디오 버튼/등급 요소가 의미있는 UI에서 연결된 이벤트를 시작하지 않습니다. 아래 샘플에 대한 js 바이올린 및 이벤트를 트리거하는 모든 확인란을 선택했을 때 나는 '설정'옵션과 onChange 별도로뿐만 아니라 시도했다. 아무것도 예상대로 작동하지 않습니다. 자바 스크립트 :

$("#cbdiv").checkbox('setting', 'onChange', function() { 
    alert("Changed"); 
}); 
$("#addcheckboxes").unbind(); 
var chkcounter = 0; 
$("#addcheckboxes").bind('click', function() { 
    $('#chkgrp').append("<div id='chkbx_'" + chkcounter + "class='ui checkbox'><input type='checkbox' ></div>"); 
    $('#chkbx_' + chkcounter).checkbox({ 
    onChange: function() { 
     alert('i am added. my id is : ' + $(this).attr('id')); 
    } 
    }); 
}); 

HTML은

<div class="field"> 
    <div id="cbdiv" class="ui toggle checkbox"> 
    <input type="checkbox" id="confirm" name="confirmed"> 
    <label>Confirmed</label> 
    </div> 
    <div> 
    <button id="addcheckboxes">Add checkboxes</button> 
    <div id="chkgrp"> 
    </div> 
    </div> 
</div> 

Jsfiddle sample

Answer 1

이 때문에 잘못된 id 요소를 추가의 append 문이다. append 문을 실행 한 후 html을 보면 아래처럼 보일 것입니다. 위의 코드 후

<div id="chkgrp"> 
    <div id="chkbx_" 0class="ui checkbox"> 
     <input type="checkbox"> 
    </div> 
</div> 

는 jQuery를 통해 ID chkbx_0 검색하고 그의 OnChange 이벤트를 추가하려고하는, 실행합니다. 그래서 실패했습니다. 아래와 같이 append 요소 구문을 업데이트하면 제대로 작동합니다. 위의 코드에서

$('#chkgrp').append("<div id='chkbx_" + chkcounter + "' class='ui checkbox'><input type='checkbox' ></div>"); 

, 난 chkcounter id='chkbx_" + chkcounter + "'을 추가 한 후 id 문자열을 종료했다. 이전 코드에서 chkcounter 자체를 추가하기 전에 id 문자열을 닫았습니다. id='chkbx_'" + chkcounter + ". 당신의 semantic CSS는 다음 스타일을 가지고있는 것처럼

UPDATE는

보인다.

.ui.checkbox input { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     opacity: 0; 
     outline: 0px; 
    } 

위의 스타일 때문에 확인란을 볼 수 없습니다. 스타일이 적용된 체크 박스를 보려면 체크 박스에 label을 추가하고 아래와 같이 코드를 업데이트하십시오.

$('#chkgrp').append("<div id='chkbx_" + chkcounter + "' class='ui checkbox'><input type='checkbox'><label>test</label></div>"); 

또한 당신이 $(this).attr('id')를 사용하여 요소의 ID를 얻으려고 노력하는 것으로 나타났습니다. 체크 박스에는 id이라는 속성이 없으므로이 명령문은 출력 undefined을 제공합니다. 나는 당신이 ID chkbx_0을 얻으려고 노력하기를 바랍니다. 이 경우 아래와 같이 코드를 추가해야합니다.

$(this).parent().attr('id'); 

나는 위의 모든 변화와 바이올린을 업데이트하고 제대로 그건 설정 한 이유는되지 확인란 코드 ID의 이름으로 데모 here.

Answer 2

을 볼 수 있습니다. 아래에서 작업 코드를 볼 수 있습니다

$("#addcheckboxes").bind('click', function() { 
    chkcounter++; // set counter increment 
    $('#chkgrp').append("<div id='chkbx_"+chkcounter+"' class='ui checkbox'><input type='checkbox' name='checkboxval[]' id='checkbox_id_"+chkcounter+"' ></div>"); 
    $('#chkbx_'+chkcounter).checkbox({onChange:function(){alert('i am added. my id is : '+$(this).attr('id'));}}); 
}); 

희망이 도움이 될 것입니다.