2016-11-29 44 views
0

我使用jquery數字鍵盤。它的完美, 但在ajax調用後無法工作。我已經累於得('點擊功能和其他功能等,但我沒有得到結果 我很抱歉,我的英語不好:) 延伸鏈接:http://a.kabachnik.info/jquery-numpad.htmljquery數字鍵盤不工作後,阿賈克斯呼籲

小鍵盤的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調用重載數字鍵盤和其他地區:

$("#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> 
+0

我認爲你需要重新初始化ajax成功回調中的數字鍵盤,因爲最初的元素被替換 – anu

回答

0

創建一個函數來初始化元素小鍵盤

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

它將重新安裝插件事件刷新元素。

+0

非常感謝你anu,我試着這個代碼,但問題countinues。我不知道該怎麼辦 – ermanak