動的に追加されたsemicctic UIチェックボックス/ラジオ/レーティングイベントが起動しない

Question

動的に追加されたチェックボックス/ラジオボタン/レーティング要素は、セマンティックUIで接続されたイベントを起動しません。以下はサンプルのjsフィドルで、チェックボックスをオンにしたときにイベントを引き起こすわけではありません。設定とオプションを別々に試してみました。期待どおりに動作するものはありません。 Javascriptを：

$("#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>"); 

、Iはchkcounter id='chkbx_" + chkcounter + "'を追加した後id列を閉じています。以前のコードでは、id='chkbx_'" + chkcounter + "を追加する前にid文字列を閉じています。

UPDATE

あなたsemantic CSSは次のスタイルを持っているように見えます。

.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'));}}); 
}); 

希望すると、これが役に立ちます。