ajaxで画面を読み込むとfunctionが利かなくなる

Question

ワードプレスで自作の検索機能をつくっております。
チェックボックスの数をカウントするプログラムをこのサイトを参考に作っています。

■できないこと
Ajaxで<div id="search-result"></div>を置き換える仕様になっているのですが、
置き換えると、カウントするfunctionが機能しなくなります。
以下がプログラムです。

custumsearch.php

<div id="search-result">
<form>
<p id="tohoku">
    <input type="checkbox" name="pref" value="1" id="1" checked="checked"> <label for="1">北海道</label><br>
    <input type="checkbox" name="pref" value="2" id="2"> <label for="2">青森</label><br>
    <input type="checkbox" name="pref" value="3" id="3"> <label for="3">岩手</label><br>
    <input type="checkbox" name="pref" value="4" id="4" checked="checked"> <label for="4">宮城</label><br>
    <input type="checkbox" name="pref" value="5" id="5"> <label for="5">秋田</label><br>
    <input type="checkbox" name="pref" value="6" id="6"> <label for="6">山形</label><br>
    <input type="checkbox" name="pref" value="7" id="7"> <label for="7">福島</label><br>
</p>

<div class="tohokuret"></div>
</div>
</form>

<script>
// カウントする
$(function() {
    $('input:checkbox').change(function() {
        var cnt = $('#tohoku input:checkbox:checked').length;
        $('div.tohokuret').text('選択：' + cnt + '個');
    }).trigger('change');
});
</script>

原因はなんなのでしょうか？
どなたかご教授をおねがいいたします。

コードが違ってました。

</div>は</form>のしたです。 訂正します。 ```<p>訪れたことがある都道府県を選択してください</p> <div id="search-result"> <form> <p id="tohoku"> <input type="checkbox" name="pref" value="1" id="1" checked="checked"> <label for="1">北海道</label><br> <input type="checkbox" name="pref" value="2" id="2"> <label for="2">青森</label><br> <input type="checkbox" name="pref" value="3" id="3"> <label for="3">岩手</label><br> <input type="checkbox" name="pref" value="4" id="4" checked="checked"> <label for="4">宮城</label><br> <input type="checkbox" name="pref" value="5" id="5"> <label for="5">秋田</label><br> <input type="checkbox" name="pref" value="6" id="6"> <label for="6">山形</label><br> <input type="checkbox" name="pref" value="7" id="7"> <label for="7">福島</label><br> </p> <div class="tohokuret"></div> </form> </div> <script> // カウントする $(function() { $('input:checkbox').change(function() { var cnt = $('#tohoku input:checkbox:checked').length; $('div.tohokuret').text('選択：' + cnt + '個'); }).trigger('change'); }); </script> ```

Answer 1

要素が動的に生成されてるかではないかと思われます。現状の組み方だと後から現れる要素にイベントが付与されません。

下記のようにしてみては

$('input:checkbox').change(
↓
$(document).on('change','input:checkbox'

Comments

[kakeshi]

m.ts10806様
早速ご回答いただきありがとうございます。
無事に動きました！
ありがとうございました。