44870

jQuery dynamically input fields not working

Question:

I was following a tutorial (which I modified a bit) here: <a href="http://jsfiddle.net/hMJEy/210/" rel="nofollow">code</a>

In JSFiddle the code is working neat, however, on the real page which code is below, is not working, I've been struggling but I cannot find an answer :-( so any help is appreciated.

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="javascript/jquery-2.1.0.min.js"></script> <script type="text/javascript"> $('.multi-field-wrapper').each(function() { var $wrapper = $('.multi-fields', this); $(".add-field", $(this)).click(function(e) { $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); }); $('.multi-field .remove-field', $wrapper).click(function() { if ($('.multi-field', $wrapper).length > 1) $(this).parent('.multi-field').remove(); }); }); </script> <title>AQUATAP - Gestor de Información - Añadir Pedido</title> </head> <body> <form role="form" action="add_order.php" method="POST"> Cliente: <input type="text" name="cliente" id="buscar"> <br> <hr /> Fecha de salida: <br> <input type="radio" name="salida_pronosticada" value="male"> En el día <br> <input type="radio" name="salida_pronosticada" value="male"> 2 días <br> <input type="radio" name="salida_pronosticada" value="female"> 3 días <br> <input type="radio" name="salida_pronosticada" value="female"> 5 días <br> <input type="radio" name="salida_pronosticada" value="female"> 1 semana <br> <input type="radio" name="salida_pronosticada" value="female"> Otro <input type="text" name="salida_pronosticada_otro"> días <br> <hr /> <label>Stuff y cantidad</label> <div class="multi-field-wrapper"> <div class="multi-fields"> <div class="multi-field"> <input type="text" class="buscar_prod" name="input_referencia[]"> <input type="text" name="input_cantidad[]"> <button type="button" class="remove-field"> X </button> </div> </div> <button type="button" class="add-field"> Add field </button> <input type="submit" name="guardar" value="Guardar" /> </div> </form> </body>

So well... any help is appreciated. I've been playing around and I think i might be missing something... like if the script didn't start.

Answer1:

As you are saying that your code is working on the page you showed us.

Just try this :

http://api.jquery.com/ready/ $( document ).ready(function() { $('.multi-field-wrapper').each(function() { var $wrapper = $('.multi-fields', this); $(".add-field", $(this)).click(function(e) { $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); }); $('.multi-field .remove-field', $wrapper).click(function() { if ($('.multi-field', $wrapper).length > 1) $(this).parent('.multi-field').remove(); }); }); });

Answer2:

Add Your Code Inside document.ready

$(function(){ $('.multi-field-wrapper').each(function() { var $wrapper = $('.multi-fields', this); $(".add-field", $(this)).click(function(e) { $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); }); $('.multi-field .remove-field', $wrapper).click(function() { if ($('.multi-field', $wrapper).length > 1) $(this).parent('.multi-field').remove(); }); }); });

Answer3:

Wrap your code in <a href="http://api.jquery.com/ready/" rel="nofollow"><strong>document-ready</strong></a> handler

$(document).ready(function() { });

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/3NEif.png" data-original="https://i.stack.imgur.com/3NEif.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Answer4:

<head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="javascript/jquery-2.1.0.min.js"></script> <script type="text/javascript"> $( document ).ready(function() { $('.multi-field-wrapper').each(function() { var $wrapper = $('.multi-fields', this); $(".add-field", $(this)).click(function(e) { $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); }); $('.multi-field .remove-field', $wrapper).click(function() { if ($('.multi-field', $wrapper).length > 1) $(this).parent('.multi-field').remove(); }); }); }); </script> <title>AQUATAP - Gestor de Información - Añadir Pedido</title> </head>

You need to kick things off with a document ready function.

"A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you".

Taken from <a href="http://learn.jquery.com/using-jquery-core/document-ready/" rel="nofollow">http://learn.jquery.com/using-jquery-core/document-ready/</a>

Recommend

  • LyX — Title, Abstract, Keywords Missing When Using Elsevier Class in View
  • reduce/reduce conflicts using ocamlyacc
  • Table striping rows in CSS Grid
  • Couchbase: Connection refused
  • ZipList with Scalaz
  • Suqueries in select clause with JPA
  • abstracting over a collection
  • How to view images from protected folder with php?
  • Display images in Django
  • If I include Java 8 in my Android app does that affect which devices it will work on?
  • How can I send an e-mail from a vbs script
  • Sails.js/waterline: Executing waterline queries in toJSON function of a model?
  • Retrieving value from sql ExecuteScalar()
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Can Jackson SerializationFeature be overridden per field or class?
  • Resize panoramic image to fixed size
  • Importing jscolor library in angular 2
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Data Validation Drop Down Box Arrow Disappearing
  • How to disable jQuery.jplayer autoplay?
  • How to delete a row from a dynamic generate table using jquery?
  • KeystoneJS: Relationships in Admin UI not updating
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • using HTMLImports.whenReady not working in chrome
  • Hits per day in Google Big Query
  • How do you join a server to an Active Directory (domain)?
  • Angular 2 constructor injection vs direct access
  • how does django model after text[] in postgresql [duplicate]
  • Java static initializers and reflection
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Android Google Maps API OnLocationChanged only called once
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • Checking variable from a different class in C#
  • Binding checkboxes to object values in AngularJs
  • UserPrincipal.Current returns apppool on IIS
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?