Blogger - jQueryの出力はありませんか？

Question

私のコードは、タグがクリックされたときにcheckedクラスの要素を表示することです。
ライブページで☐ tag-nameをクリックすると、何も起こりません。
jsfiddleでそのファイルをクリックすると正常に動作します。
Bloggerで何が起こっていて間違っているのか分かりません。
誰かが私を助けてくれますか？ありがとう。

Blogger live page、jsfiddle：

$('div.label').on('click', function(){ 
 
    if ($(this).text().match("☐")) { 
 
    $('div.dhptable table.hptable').show(); 
 
    $('div.label').each(function(){ 
 
     $(this).text($(this).text().replace("☑", "☐")); 
 
    }); 
 
    $(this).text($(this).text().replace("☐", "☑")); 
 
    $('table.hptable:not(.'+$(this).attr("id")+')').hide('slow'); 
 
    } else { 
 
    $('div.dhptable table.hptable').show('slow'); 
 
    $(this).text($(this).text().replace("☑", "☐")); 
 
    } 
 
})

body { 
 
    width: 650px; 
 
} 
 
.hptable { 
 
    text-align:center; 
 
    vertical-align: middle; 
 
    margin: 12px; 
 
    display: inline-block; 
 
} 
 
.hptable td:hover { 
 
    background-color: #CEE9FF; 
 
} 
 
.cell { 
 
    vertical-align: middle; 
 
    width: 176px; 
 
    max-width: 177px; 
 
    /*height: 176px; 
 
    max-height: 177px;*/ 
 
    text-align: center; 
 
    border: 1px solid #87CEEB !important; 
 
    background-color: #D9F9FF; 
 
    font-size: large; 
 
    font-weight: bold; 
 
} 
 
.hptable img { 
 
    vertical-align:middle; 
 
    max-width: 175px; 
 
    max-height: 175px; 
 
} 
 
div.muri.b textarea.muri { 
 
    width: 60px; 
 
    height: 30px; 
 
} 
 
div.lang { 
 
    display: inline-block; 
 
    border: 1px solid #D1D1FF; 
 
    padding: 1px; 
 
    border-radius: 2px; 
 
} 
 
.label { 
 
    display:inline-block; 
 
    background: #84E3FF; 
 
    position: relative; 
 
} 
 
.label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; right: 0; 
 
    border-top: 11px solid white; 
 
    border-left: 11px solid #84E3FF; 
 
    width: 0; 
 
} 
 
.label:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; right: 0; 
 
    border-bottom: 11px solid white; 
 
    border-left: 11px solid #84E3FF; 
 
    width: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<hr /><b>TAG</b>：<div id='windows' class='label'>&nbsp;☐ Windows　</div>　<div id='jquery' class='label'>&nbsp;☐ jQuery　</div>　<div id='software' class='label'>&nbsp;☐ Software　</div>　<div id='blogger' class='label'>&nbsp;☐ Blogger　</div> 
 
<br /> 
 
<hr /> 
 
<div class='dhptable' style='text-align: left; vertical-align: middle;'> 
 
<table class="hptable exc windows"> 
 
<tr><td class='null cell'>TAG: windows</td></tr></table> 
 
<table class="hptable exc jquery"> 
 
<tr><td class='null cell'>TAG: jquery</td></tr></table> 
 
<table class="hptable exc software"> 
 
<tr><td class='null cell'>TAG: software</td></tr></table> 
 
<table class="hptable exc software"> 
 
<tr><td class='null cell'>TAG: software</td></tr></table> 
 
<table class="hptable exc blogger"> 
 
<tr><td class='null cell'>TAG: blogger</td></tr></table> 
 
<table class="hptable exc"> 
 
<tr><td class='null cell'> 
 
</td></tr></table> 
 
</div>

Answer 1

あなたのサイトにロードするためにDOMを待ついけないようです。準備完了イベントの周りにコードをラップしようとする可能性があります。

$(function() { 
    $('div.label').on('click', function() { 
     if ($(this).text().match("☐")) { 
      $('div.dhptable table.hptable').show(); 
      $('div.label').each(function() { 
       $(this).text($(this).text().replace("☑", "☐")); 
      }); 
      $(this).text($(this).text().replace("☐", "☑")); 
      $('table.hptable:not(.' + $(this).attr("id") + ')').hide('slow'); 
     } else { 
      $('div.dhptable table.hptable').show('slow'); 
      $(this).text($(this).text().replace("☑", "☐")); 
     } 
    }) 
});