ajax调用后jQuery numpad无法正常工作

Question

i'm using jquery numpad. its perfectly, but not working after ajax call. i've tired on('click function and other function etc. But I did not get results. i'm so sorry my bad english :) extension link: http://a.kabachnik.info/jquery-numpad.html

Numpad javascript:

// Set NumPad defaults for jQuery mobile. 
// These defaults will be applied to all NumPads within this document!
$.fn.numpad.defaults.gridTpl = '<table class="table modal-content"></table>';
$.fn.numpad.defaults.backgroundTpl = '<div class="modal-backdrop in"></div>';
$.fn.numpad.defaults.displayTpl = '<input type="text" class="form-control" />';
$.fn.numpad.defaults.buttonNumberTpl =  '<button type="button" class="btn btn-default"></button>';
$.fn.numpad.defaults.buttonFunctionTpl = '<button type="button" class="btn" style="width: 100%;"></button>';
$.fn.numpad.defaults.onKeypadCreate = function(){$(this).find('.done').addClass('btn-primary');};

// Instantiate NumPad once the page is ready to be shown
$(document).ready(function(){
    $('#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();

    $('#numpad4column tr').on('click', function(e){
        $(this).find('.qtyInput').numpad('open');
    });
});

AJAX call reload numpad and other area:

$("#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ı');          
            }
        }
    });
});

HTML:

<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>

Answer 1

create a function to initialize numpad on elements

    $(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();
     }

Call the same function in ajax success callback

$.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
        }
    }
});

It will reattach the plugin events to the refreshed elements.