Bootstrap table内のチェックボックスにjQueryを適用できない

Question

LaravelとVue.jsを用いて以下のようにBootstrap tableにcheckboxを作り、jQueryでチェックされた時のイベント検知を行おうとしておりますが上手くいきません。チェックボックスが変化したらConsoleにchangedと表示したいです。

index.blade.php

@extends('layouts.app')

@section('content')
<div id="x_lists_index">
    <x-lists-index inline-template>
        <form action="{{ route('xLists.multiDelete') }}" method="post">
            @csrf
            <bootstrap-table-component ref="table" :props-data="{{$xLists}}" 
                :props-columns="columns"></bootstrap-table-component>
            <button type="submit">削除</button>
        </form>
    </x-lists-index>
</div>
@endsection

@section('js')
<script>
    new Vue({
        el: "#x_lists_index",
    });
    $(function () {
        $("input[name='ids[]']").change(function() {
            console.log('changed');
        });
    });
</script>
@endsection

index.js

Vue.component('x-lists-index', {
    data() {
        return {
            columns: [{
                field: "id",
                title: "　",
                sortable: true,
                formatter: function (value, row, index) {
                    return '<input type="checkbox" id="check_' + index + '" \
                    name="ids[]" value="' + value + '" style="transform: scale(2);">';
                }
            },
            {
                field: "model_number",
                title: "型番",
                sortable: true,
                filterControl: "input",
            },]
        };
    },
});

BootstrapTableComponent.vue

<template>
    <div>
        <bootstrap-table
            ref="table"
            :data="data"
            :options="options"
            :columns="columns"
        />
    </div>
</template>

<script>
import BootstrapTable from "bootstrap-table/dist/bootstrap-table-vue.min.js";
export default {
    props: {
        propsData: Array,
        propsColumns: Array,
    },
    components: {
        "bootstrap-table": BootstrapTable
    },
    data() {
        return {
            data: [],
            options: {
                search: true,
                detailView: true,
                detailFormatter: null,
                pagination: true,
                showColumns: true,
                filterControl: true,
                toolbar: "#toolbar",
                clickToSelect: true,
                idField: "id",
                selectItemName: "id",
                resizable: true,
                locale: "ja-JP"
            },
            columns: []
        };
    },
    created() {
        this.columns = this.propsColumns;
        this.data = this.propsData;
    },
};
</script>

試したこと

jQueryのchangeメソッドをclickやon('change', ...)にしてもダメでした。
また、bladeファイルではなくindex.js内のcreatedフックに同様のjQuery関数を移動してもダメでした。

できていること

チェックされた行を複数削除する機能は問題なく動作しています。
Bootstrap tableに関係ないjQuery関数は問題なく動作しています（buttonのdisabledの切り替えなど）。
Bootstrap tableに関係ないcheckboxに対しても問題なく動作しています
（<input type="checkbox" id="check_out_of_table">に対する$("input[id='check_out_of_table']").change(function...)）。

バージョン

Laravel7.3 jQuery3.2 Vue2.5.17

望まない解決策

index.js内のformatter関数を以下のように変更すると成功しました。しかしできるだけこのようなコードは避けたいです。

formatter: function (value, row, index) {
　　　　return '<input type="checkbox" id="check_' + index + '" name="ids[]" value="' + value + '" style="transform: scale(2);"> \
　　　　　　　　<script>$("#check_' + index + '").change(function() {console.log("chenged");});</script>';

Answer 1

$("input[name='ids[]']").change(function() {だと、その時点に存在要素にイベントを監視するという意味です。動的に作られたinput[name='ids[]']は監視されません。
なのでbodyを監視し、その内input[name='ids[]']要素のchangeイベントを監視する様に設定する必要があります。

$(body).on('change',"input[name='ids[]']",(function() {
     console.log('changed');
});

Comments

[hoboki]

なるほど、親要素を指定すればよかったのですね。ありがとうございます。