События Javascript не срабатывают на элементах в загрузочном модальном

Question

У меня есть веб-приложение, которое использует виртуальную клавиатуру для ввода данных в поля ввода. 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 Modal, события кликов в моем javascript не исчезнут. Я не знаю, что вызывает это, у меня есть javascript-библиотека (bootbox.js), которая создает модальную форму и добавляет ее в нижнюю часть тела html. Я дважды проверил, что код в модальном правильном и работает, если он скопирован из модального. Любая помощь очень ценится.

Answer 1

После некоторого исследователя в том, как динамическое содержание работы и как JS работы я добавил вызов моим keypad.js файл над клавиатурой в динамическом модального конструктора, так что элементы инициализируются когда функция создана.

Спасибо всем, что указали мне в правильном направлении.

Answer 2

Кажется, вы активируете эту функцию перед созданием элемента Bootstrap Modal, возможно, вы можете попробовать делегировать события щелчка, он должен работать.

Такие, как:

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