HTMLファイルが動作しません

Question

私は同じコードの2つのバージョンがあります。 このページのコードスニペットに追加したところ、うまくいきました。しかし、何らかの理由で私のコンピュータでそれを動作させることはできません。

私のDropbox versionを見てみましょう。両方のケースで同じコードを使用しています。子チェックボックスがチェックされている場合は親チェックボックスをチェックし、逆の場合は親チェックボックスをチェックすることになっています。

皆さんはなぜそれが起こっているのか考えていますか？

$('input[type=checkbox]').click(function() { 
 
    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked')); 
 
    var sibs = false; 
 
    $(this).closest('ul').children('li').each(function() { 
 
     if($('input[type=checkbox]', this).is(':checked')) sibs=true; 
 
    }) 
 
    $(this).parents('ul').prev().prop('checked', sibs); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="tree" id="tree"> 
 
    <li> 
 
     <input type="checkbox" name="account_settings" value="yes">Account Settings 
 
     <!-- AND SHOULD CHECK HERE --> 
 
     <ul> 
 
      <li> 
 
       <input type="checkbox" name="one" value="one">AS One</li> 
 
      <li> 
 
       <input type="checkbox" name="two" value="two">AS Two</li> 
 
      <li> 
 
       <input type="checkbox" name="user_roles" value="user_roles">Users &amp; Roles 
 
       <!-- SHOULD CHECK HERE --> 
 
       <ul> 
 
        <li> 
 
         <input type="checkbox" name="user_role" value="add">Add</li> 
 
        <li> 
 
         <input type="checkbox" name="user_role" value="delete">Delete</li> 
 
        <!-- CHECK HERE --> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" name="rl_module" value="yes">RL Module</li> 
 
    <li> 
 
     <input type="checkbox" name="rl_module" value="yes">Accounting 
 
     <ul> 
 
      <li> 
 
       <input type="checkbox" name="vat" value="yes">VAT</li> 
 
      <li> 
 
       <input type="checkbox" name="bank_account" value="yes">Banking 
 
       <ul> 
 
        <li> 
 
         <input type="checkbox" name="view" value="yes">View</li> 
 
        <li> 
 
         <input type="checkbox" name="crud" value="yes">CRUD</li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 1

本文の後ろにスクリプトを挿入しましたか？ （あなたはスクリプトタグを頭の中にjQueryをロードする場所に残すことができます）
あなたのコードを使って、スクリプトを本体の後ろに置くだけでうまくいきました。
体の前に置いたときにスクリプトがうまくいきませんでした。
それはあなたのために働いた場合は教えてください。

Answer 2

上記のスニペットの理由は動作していない要素に「添付取得していない事象」です。このページでデバッガツールを開き、Dropboxの要素にイベントが接続されていないことがわかります。

この状況を解決するために、onを使用してイベントを添付することができます。

$('input[type=checkbox]').on('click',function() { 
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked')); 
var sibs = false; 
$(this).closest('ul').children('li').each(function() { 
    if($('input[type=checkbox]', this).is(':checked')) sibs=true; 
}) 
$(this).parents('ul').prev().prop('checked', sibs); 
});