onRemove 事件未触发

Question

我有一些bootstrap-tagsinput代码：

<div x-show.transition.in="step === 1">
<div class="row mb-3">
    <div class="col-md-12">
        <strong>Job Area:</strong>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <!-- <input name="job_area" placeholder="Select a job area or type to insert another." class="form-control" \> -->
        <select multiple data-role="tagsinput" name="job_area" id="job_area" placeholder="Select a job area or type to insert another."></select>
        <div class="row mt-2">
            <div class="col-md-12">
                <button class="btn btn-sm btn-primary m-2" type="button" onclick="$('#job_area').tagsinput('add', 'Leadership'); $(this).hide();">Leadership</button>
                <button class="btn btn-sm btn-primary m-2">Governance, Risk Management and  Compliance</button>
                <button class="btn btn-sm btn-primary m-2">Offensive</button>
                <button class="btn btn-sm btn-primary m-2">Defensive</button>
                <button class="btn btn-sm btn-primary m-2">Security Engineering</button>
                <button class="btn btn-sm btn-primary m-2">Architecture</button>
            </div>
        </div>
    </div>
</div>
<script>
        $("input[name='job_area']").on('itemRemoved', function(event) {
        console.log('item added : '+event.item);
    });
</script>

我正在尝试在标签被删除时控制台记录该项目，但它没有触发。还尝试了不同的选择器来获得正确的输入。没有火。

感谢任何帮助。

Answer 1

<input type="text" name="job_area" placeholder="Select a job area or type to insert another." data-role="tagsinput" >

  $("input[name='job_area']").on('itemRemoved', function(event) {
        console.log('item removed : '+event.item);
    });

您选择了错误的元素job_area应该是输入类型

Answer 2

我遇到了 2 个问题。首先，我没有使用正确的选择器。我需要使用 select[name='job_area'] 而不是 input/

其次，我的事件侦听器不在 document.ready 回调中。通过包装 docready 修复它：

$(document).ready(function() {
    $("select[name='job_area']").on('itemRemoved', function(event) {
        console.log('item removed : '+event.item);
    });
});

onRemove 事件未触发

onRemove event not firing

jquery

bootstrap-tags-input