2016-07-30 10 views
2

セマンティックUI 2.1を使用していて問題があります。私は私のページに3つのスライダーチェックボックスを持っています。彼らはすべて同じクラスを持っており、一度にすべてを初期化できます。それぞれには、AJAX呼び出しでサーバーに送信する必要があるdata-*属性が含まれています。セマンティックUIチェックボックスイベントがAJAXコール後にトリガーされない

は、ここで問題です:AJAX呼び出しが終了した後、初めて

、チェックボックスのためのイベントは機能しなくなります。私はイベントがDOMにバインドされていることを知っています。DOMの変更によって、更新されませんが、その周りには何か方法がありますか?

は、ここに私のページの非常にシンプルなバージョンです:

<html> 
<body id="body"> 
<!-- First Element --> 
<div class="ui fitted slider checkbox comment"> 
    <input data-status="0" type="checkbox"> <label></label> 
</div> 
<!-- Second Element --> 
<div class="ui fitted slider checkbox comment"> 
    <input data-status="2" type="checkbox"> <label></label> 
</div> 
<!-- Third Element --> 
<div class="ui fitted slider checkbox comment"> 
    <input data-status="3" type="checkbox"> <label></label> 
</div> 

<button class="button-action">Do Stuff</button> 

</body> 
<script> 
$('.checkbox.comment').checkbox().checkbox({ 
    onChecked: function() { 
     // This is only called before ajax reload, after ajax, it just won't 
     console.log("onChecked called"); 
    }, 
    onUnchecked: function() { 
     // This too is only called before ajax reload 
     console.log("onUnchecked called"); 
    } 
}); 

$(document).delegate('.button-action', 'click', function() { 

    $.ajax({ 
     // Noraml ajax parameters 
    }) 
    .done(function (data) { 
     if (data.success) { 
      // Reload 
      $('#body').load(document.URL + ' #body'); 
     } 
    }); 
}); 
</script> 
<html> 

答えて

0

あなたはそれがあなたのページをリロードする関数内であなたのチェックボックスのイベントリスナーを入れて、その関数を毎回呼び出すために試みることができるか、ドキュメントに変更を加えるときDOM。参考のためにサンプルコードを添付しました。

function Checkbox_eventlistener(){ 
 
    $('.checkbox.comment').checkbox().checkbox({ 
 
     onChecked: function() { 
 
      // This is only called before ajax reload, after ajax, it just won't 
 
      console.log("onChecked called"); 
 
     }, 
 
     onUnchecked: function() { 
 
      // This too is only called before ajax reload 
 
      console.log("onUnchecked called"); 
 
     } 
 
    }); 
 
} 
 

 
$(document).delegate('.button-action', 'click', function() { 
 

 
    $.ajax({ 
 
     // Noraml ajax parameters 
 
    }) 
 
    .done(function (data) { 
 
     if (data.success) { 
 
      // Reload 
 
      $('#body').load(document.URL + ' #body'); 
 
      Checkbox_eventlistener(); 
 
     } 
 
    }); 
 
}); 
 

 
$(function(){ 
 
    Checkbox_eventlistener(); 
 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<!-- First Element --> 
 
<div class="ui fitted slider checkbox comment"> 
 
    <input data-status="0" type="checkbox"> <label></label> 
 
</div> 
 
<!-- Second Element --> 
 
<div class="ui fitted slider checkbox comment"> 
 
    <input data-status="2" type="checkbox"> <label></label> 
 
</div> 
 
<!-- Third Element --> 
 
<div class="ui fitted slider checkbox comment"> 
 
    <input data-status="3" type="checkbox"> <label></label> 
 
</div> 
 

 
<button class="button-action">Do Stuff</button>

+0

私はそれが動作しません怖いです。最初はうまくいきますが、ページをリロードした後にボタンは何もしません。 – VSG24

+0

** .load()**メソッドでセレクタサフィックスの式を指定する必要がありますか? _ "接尾辞付きのセレクタ式を持たないURLを使用して.load()を呼び出すと、スクリプトが削除される前にコンテンツが.html()に渡され、スクリプトブロックが破棄される前に実行されます。 URLにセレクタ式を追加した状態で.load()が呼び出されますが、DOMが更新される前にスクリプトが取り除かれて実行されることはありません。 "_ http://api.jquery.com/load/ –

+0

その '+ '#body''部分がなければ、それは混乱を招き、' body'を複製します。私はそのセレクタがURLの最後になければ、それが動作するだけでなく、#bodyも複製することを確認できます。要素 – VSG24

関連する問題