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("☑", "☐")); 
     } 
    }) 
});