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

我遇到了两个问题。首先，我没有使用正确的选择器。我需要使用 var index = zip.indexOf("search"); 而不是 select[name='job_area']/

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

document.ready

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

onRemove 事件未触发

2 个答案: