单击内部的特定按钮时避免关闭 Bootstrap Modal

Question

我实现了一个带有 5 个按钮的表单模式：提交、2 个关闭按钮和另外 2 个用于输入数字微调器的输入数字微调器，它允许用户使用“+”和“-”按钮输入 select 一个数量。 问题是每次单击“+”或“-”按钮时，模式都会关闭，这是模式在按下提交或关闭按钮时的正常行为，但我需要模式保持可见并允许用户 select没有模态的数量已关闭。

这是表单内控制数字微调器的按钮：

<div class="item-count">
    <div class="input-group number-spinner">
        <span class="input-group-btn">
            <button class="btn btn-default" id="spin1" data-dir="dwn">-</button>
        </span>
        <input type="text" class="form-control text-center" name="quantity" value="1">
        <span class="input-group-btn">
            <button class="btn btn-default" id="spin2" data-dir="up">+</button>
        </span>
    </div>  
</div>

这是控制输入微调器的 function：

<script>
    $(document).on('click', '.number-spinner button', function () {    
        var btn = $(this),
        oldValue = btn.closest('.number-spinner').find('input').val().trim(),
        newVal = 0;             
        if (btn.attr('data-dir') == 'up') {
            newVal = parseInt(oldValue) + 1;
        } else {
            if (oldValue > 1) {
                newVal = parseInt(oldValue) - 1;
            } else {
                newVal = 1;
            }
        }
        btn.closest('.number-spinner').find('input').val(newVal);
    });
</script>   

如果我使用 e.preventDefault() （为此目的与按钮的 ID 相关联：spin1 和 spin2）来避免关闭模式，则模式保持可见但微调器不会使用新的更新数量输入值，并且表单将默认值 1 发送到服务器进行处理。 任何指导表示赞赏。 谢谢。

Answer 1

当您尝试 e.preventDefault() 时，您是否将事件传递给 function？

如果不检查控制台，一定有一个错误说'e'未定义。

所以只要通过'e'（事件），它就应该工作。

$(document).on('click', '.number-spinner button', function (e) {  
        e.preventDefault();
        var btn = $(this),
        oldValue = btn.closest('.number-spinner').find('input').val().trim(),
        newVal = 0;             
        if (btn.attr('data-dir') == 'up') {
            newVal = parseInt(oldValue) + 1;
        } else {
            if (oldValue > 1) {
                newVal = parseInt(oldValue) - 1;
            } else {
                newVal = 1;
            }
        }
        btn.closest('.number-spinner').find('input').val(newVal);
    });

Answer 2

我认为最好的解决方案是添加带有按钮样式的<a href>标记。