jQuery update input field multiple times

Question

I'm currently using the following to update an input field without reloading the entire page:

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

However, after the second replace, the input field no longer works, and I need to refresh the entire page. What I am looking for, is that the script runs on each change I make to the input field. Any ideas?

What about .change event?

unalignedmemoryaccess
– unalignedmemoryaccess

2017-06-08 07:48:36 +00:00
Commented Jun 8, 2017 at 7:48 — unalignedmemoryaccess
– unalignedmemoryaccess, Commented Jun 8, 2017 at 7:48
Could you possibly add some relevant html code too?

Guruprasad J Rao
– Guruprasad J Rao

2017-06-08 07:49:56 +00:00
Commented Jun 8, 2017 at 7:49 — Guruprasad J Rao
– Guruprasad J Rao, Commented Jun 8, 2017 at 7:49
please provide your HTML code also

Manish Yadav
– Manish Yadav

2017-06-08 07:51:54 +00:00
Commented Jun 8, 2017 at 7:51 — Manish Yadav
– Manish Yadav, Commented Jun 8, 2017 at 7:51
HTML added. Already tried .change but no luck.

Kevinster
– Kevinster

2017-06-08 07:52:59 +00:00
Commented Jun 8, 2017 at 7:52 — Kevinster
– Kevinster, Commented Jun 8, 2017 at 7:52

zuluk · Accepted Answer · 2017-06-08 07:55:20Z

1

You have to replace

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

with

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

because you dynamically replace this element.

answered Jun 8, 2017 at 7:55

zuluk

1,5778 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevinster · Accepted Answer · 2017-06-08 07:56:43Z

It seems this did the trick

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

Found here: Calling a jQuery function multiple times

Collectives™ on Stack Overflow

jQuery update input field multiple times

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related