Question

我有一个使用虚拟键盘将数据输入到输入框的Web应用程序。 HTML代码：

<form class="form-price">
    <input type="text" class="form-control keypad-line" id="price-value" onfocus="blur()"/>
    <div class="keypad-line">
        <a data-target="#price-value" class="btn btn-default keypad-btn value-key">7</a> 
        <a data-target="#price-value" class="btn btn-default keypad-btn value-key">8</a> 
        <a data-target="#price-value" class="btn btn-default keypad-btn value-key">9</a>
    </div>
    <div class="keypad-line">
        <a data-target="#price-value" class="btn btn-default keypad-btn value-key">4</a> 
        <a data-target="#price-value" class="btn btn-default keypad-btn value-key">5</a> 
        <a data-target="#price-value" class="btn btn-default keypad-btn value-key">6</a>
    </div>
    <div class="keypad-line">
        <a data-target="#price-value" class="btn btn-default keypad-btn value-key">1</a> 
        <a data-target="#price-value" class="btn btn-default keypad-btn value-key">2</a> 
        <a data-target="#price-value" class="btn btn-default keypad-btn value-key">3</a>
    </div>
    <div class="keypad-line">
        <a data-target="#price-value" class="btn btn-danger keypad-btn delete-key">
        <span class="glyphicon glyphicon-arrow-left"></span>
        </a> 
        <a data-target="#price-value" class="btn btn-default keypad-btn value-key">0</a> 
        <a data-target="#price-value" class="btn btn-default keypad-btn value-key">.</a>
    </div>
</form>

JAVASCRIPT：

$(function(){
    $(".value-key").click(function(){
        alert("hit");
        var inputTarget = $(this).data("target");
        $(inputTarget).val($(inputTarget).val() + $(this).html());
    });
    $(".delete-key").click(function(){
        var inputTarget = $(this).data("target");
        $(inputTarget).val($(inputTarget).val().substr(0,$(inputTarget).val().length-1));
    });
    $(".debug-key").click(function(){
        var inputTarget = $(this).data("target");
        alert($(inputTarget).val());
    });
});

此键盘正在使用，并且在我的代码中的许多地方都可以正常运行。我遇到的问题是，如果我将键盘放在Bootstrap模式中，我的javascript中的点击事件就不会消失。我不知道造成这种情况的原因，我有一个构建模态的javascript库（bootbox.js）并将其添加到html主体的底部。我已经仔细检查过模态中的代码是否正确，如果从模态中复制出来，它就可以正常工作。非常感谢任何帮助。

Answer 1

看来你在创建Bootstrap Modal元素之前初始化这个函数，可能是你可以尝试委托点击事件，它应该正常工作。

如：

$('body').on('click', '.value-key', function() {
  // some code here
});

Answer 2

在一些研究人员了解动态内容如何工作以及js如何工作后，我在动态模态构造函数中的键盘上方添加了对keypad.js文件的调用，以便在创建函数时初始化元素。

感谢大家指出我正确的方向。

Javascript事件不会触发bootstrap模式中的元素

2 个答案: