Question

我有一个bootstrap导航标签，我想用jQuery动态添加标签。当我点击一个按钮时，bootstrap modal显示我可以选择的位置。在我选择一个ajax调用后，获取所选选项的id，它会搜索完整的选项对象，然后将对象返回为json。然后添加一个新选项卡，其中包含选项的名称。一切都很好，但是如果我再次单击“添加选项”，它会返回2个选项卡...如果我再添加一个...返回3个选项卡，依此类推！继承我的代码： HTML：

<div id="select_opt" class="modal" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close_op" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">{{ __('Choose option') }}</h4>
        </div>
        <div class="modal-body">
            <select name="op" id="op">
                @if (count($language->optionDescriptions))
                    @foreach ($language->optionDescriptions as $optionDescription)
                        <option value="{{ $optionDescription->option->id }}">{{ $optionDescription->name }}</option>
                    @endforeach
                @endif
            </select>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" id="select_new_opt" data-dismiss="modal">Select</button>
        </div>
    </div>

</div>

JS：

    $('#add_opt').click(function () {
        $('#select_opt').css('display', 'block');
        $('.close_op').click( function () {
            $('#select_opt').css('display', 'none');
        });

        $('#select_new_opt').click(function () {
            var option_id = $('#op option:selected').val();

            $.ajax({
                dataType: 'json',
                type: 'POST',
                url: '{{ URL::to('options/getOption') }}',
                data: { id : option_id, _token : $('input[name="_token"]').val() },
                success: function (data) {
                    $('.nav.nav-tabs #add_option').before('<li class="active"><a data-toggle="tab" href="#option-'+option_id+'" data-attr-id="'+option_id+'">'+data.option.name+'</a></li>');
                }
            });
       });


   });

html TABS：

<div class="tab-content options_tab">
<div id="product" class="tab-pane fade in active">
    <div class="form-group">
        <label for="" class="control-label col-md-2">{{ __('Optiuni') }}</label>

    </div>
</div>

Answer 1

您是绑定事件处理程序而不是事件处理程序，因此click元素#add_opt处理程序的每个click事件都添加了.close_op和#select_new_opt元素

将事件绑定移到click处理程序之外。

$('#add_opt').click(function() {
    ....
});

$('.close_op').click(function() {
    ...
});

$('#select_new_opt').click(function() {
    ...
});

在动态生成元素时，请使用Event Delegation委托事件方法{/ 3}}。

实施例

$(document).on('click', ".close_op", function(){
    $('#select_opt').hide();
});

代替document，您应该使用最近的静态容器。

jQuery之前生成多个实例

1 个答案: