Question

我目前正在使用以下内容更新输入字段而不重新加载整个页面：

<input type="number" name="voorraad" id="5258" class="voorraad 5258" value="129">

<script>
(function($) {
jQuery(document).ready(function(){
jQuery('.voorraad').blur(function(){

var nieuwevoorraad = jQuery(this).val();
var productid = jQuery(this).attr('id');
jQuery( "." + productid ).replaceWith( '<span class="' + productid + '_glyphspan"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Bijwerken...</span>' );
    $.post("<?php echo site_url();?>/updateStock.php",{
        productid : productid,
        nieuwevoorraad : nieuwevoorraad,

     },

  function(result){
  jQuery( "." + productid + "_glyphspan" ).replaceWith( '<input type="number" name="voorraad" id="'+productid+'" class="voorraad '+productid+'" value="'+nieuwevoorraad+'"/>' );
        });
});
});
})(jQuery);
</script>

然而，在第二次替换后，输入字段不再有效，我需要刷新整个页面。我正在寻找的是，脚本运行在我对输入字段的每次更改。有什么想法吗？

Answer 1

你必须替换

jQuery('.voorraad').blur(function(){

与

jQuery(document).on("blur",".voorraad",function(){

因为你动态地替换了这个元素。

Answer 2

似乎这就是诀窍

<script>
(function($) {

jQuery( document ).on("blur", ".voorraad", function() {


var nieuwevoorraad = jQuery(this).val();
var productid = jQuery(this).attr('id');
jQuery( "." + productid ).replaceWith( '<span class="' + productid + '_glyphspan"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Bijwerken...</span>' );
    $.post("<?php echo site_url();?>/updateStock.php",{
        productid : productid,
        nieuwevoorraad : nieuwevoorraad,

     },

  function(result){
  jQuery( "." + productid + "_glyphspan" ).replaceWith( '<input type="number" name="voorraad" id="'+productid+'" class="voorraad '+productid+'" value="'+nieuwevoorraad+'"/>' );
        });
});

})(jQuery);
</script>

在此处找到：Calling a jQuery function multiple times

jQuery更新输入字段多次

2 个答案: