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

我有两个问题。首先，我没有使用正确的选择器。我需要使用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);
    });
}); 

Answer 2

<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应该是输入类型。