在ajax调用之后,Jquery numpad无法正常工作

时间:2016-11-29 13:14:39

标签: javascript jquery html ajax

我正在使用jquery numpad。它很完美, 但是在ajax调用之后没有工作。我已经厌倦了('点击功能和其他功能等。但我没有得到结果。 我很抱歉我的英语不好:) 扩展链接:http://a.kabachnik.info/jquery-numpad.html

Numpad javascript:

$("#toplamtutar").on('click', '#button-transaction2', function () {
    $.ajax({
        url: 'index.php?route=marketing/affiliate/addtransaction&token=<?php echo $token; ?>&affiliate_id=<?php echo $affiliate_id; ?>',
        type: 'post',
        dataType: 'json',
        data: 'description=' + encodeURIComponent($('#tab-transaction input[name=\'description\']').val()) + '&amount=' + encodeURIComponent($('#tab-transaction input[name=\'amount\']').val()),
        beforeSend: function() {
            $('#button-transaction2').button('loading');
        },
        complete: function() {
            $('#button-transaction2').button('reset');
        },
        success: function(json) {
            $('.alert').remove();

            if (json['error']) {
                 $('#tab-transaction').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div></div>');
            }

            if (json['success']) {
                $('#tab-transaction').prepend('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div></div>');

                $('#transaction').load('index.php?route=marketing/affiliate/transaction&token=<?php echo $token; ?>&affiliate_id=<?php echo $affiliate_id; ?>');
                $("#toplamtutar").load(location.href+" #toplamtutar>*",""); 
                $('#tab-transaction input[name=\'amount\']').val('-<?php echo $balance; ?>');
                $('#tab-transaction input[name=\'description\']').val('Hesap Alındı');          
            }
        }
    });
});

AJAX调用reload numpad和其他区域:

<div class="input-group" style="border-top: 1px solid #ededed; padding-top: 15px; padding-bottom: 15px;">
  <input type="text" name="tasimano" value="" placeholder="Masa No" style="background-color: #f0f0f0;" id="numpadButton" class="form-control" aria-describedby="numpadButton-btn" />
  <span class="input-group-btn">
    <button class="btn btn-default" id="numpadButton-btn" type="button"><i class="fa fa-calculator"></i></button>
  </span>
</div>

HTML:

{{1}}

1 个答案:

答案 0 :(得分:0)

创建一个函数来初始化元素上的numpad

    $(document).ready(function(){
        initializeNumpad(); // Instantiate NumPad once the page is ready to be shown
        $('#numpad4column tr').on('click', function(e){
            $(this).find('.qtyInput').numpad('open');
        });
    });

    function initializeNumpad() {
        $('#text-basic').numpad();
        $('#password').numpad({
                        displayTpl: '<input class="form-control" type="password" />',
                        hidePlusMinusButton: true,
                        hideDecimalButton: true 
        });
        $('#numpadButton-btn').numpad({
            target: $('#numpadButton')
        });
        $('#numpadButton-btn2').numpad({
            target: $('#numpadButton2')
        });
        $('#numpad4div').numpad();
        $('#numpad4column .qtyInput').numpad();
     }

在ajax成功回调中调用相同的函数

$.ajax({
    url: 'index.php?route=marketing/affiliate/addtransaction&token=<?php echo $token; ?>&affiliate_id=<?php echo $affiliate_id; ?>',
    ....
    ....
    success: function(json) {
        $('.alert').remove();
        .....
        if (json['success']) {
            ....
            $("#toplamtutar").load(location.href+" #toplamtutar>*",""); 
            $('#tab-transaction input[name=\'amount\']').val('-<?php echo $balance; ?>');
            $('#tab-transaction input[name=\'description\']').val('Hesap Alındı');          
            initializeNumpad();// call here to reinitialize
        }
    }
});

它会将插件事件重新附加到刷新的元素。