0

$(".convertUnits").on('keyup blur', function(event){
  var a=$(this).val();
  $('#test2').val(a);
});

function addShelfFields(){
  $('#test2').val('');
  
  var number=$('#test1').val(),     // Generate a dynamic number of inputs
      container=$('#container')[0],   // Get the element where the inputs will be added to
      e=$.Event("keyup", {keyCode: 13});
      
  while (container.hasChildNodes()){                     // Remove every children it had before
      container.removeChild(container.lastChild);
  }
    
    for (i=0;i<number;i++){
        container.appendChild(document.createTextNode("Shelf " + (i+1) + ": "));  // Append a node with a random text
        
        var input=document.createElement("input");   // Create an <input> element, set its type and name attributes
        
        input.type="text";
        input.id="addedShelf" + (i+1);
        input.name="addedShelf" + (i+1);
        input.className="addedShelvesInput ui-corner-all convertUnits";
        
        container.appendChild(input);
        container.appendChild(document.createElement("br"));      // Append a line break 
    }
    
    $("#container").on('keyup blur', '.convertUnits', function(event){
        if (event.which==13){
            $("#test1").trigger(e);
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<input class="convertUnits" type="text" id="test1" name="test1">
<input type="text" id="test2" name="test2">
<button type="button" id="build" onclick="addShelfFields();">Add number</button>
<div id="container"></div>

EDIT: I finally figuerd out how to do what I wanted... I'm leaving everything here maybe it can help someone struggling with the same problem. I updated the code snippet. The added input is triggered by enter key press.

The biggest mistake I was making is the placement of
$("#container").on('keyup blur', '.convertUnits', function(event){}); it was in the for loop. Once I realised this I moved it outside the for loop and got the rest to work.

I'm dynamically creating inputs like this which does what I want. But the newly created inputs don't inherit the functionality or styling of the other inputs. I got around the css with the included css code and I was able to add on keypress. But there's more complex function calls that I can't get to work along with some validation from jquery validate.

I add the convertUnits class but it doesn't work like it should.

$(".convertUnits").on('keyup blur', function(event){do stuff here)};

In short is it possible to link the new inputs to the css and js files so that the new inputs act like the exisitng inputs?

Hopefully this makes sense...

javascript:

function addShelfFields(){
  var number=$('#cabShelves').val(),
  container=$('#container')[0]; 

  while (container.hasChildNodes()){
    container.removeChild(container.lastChild);
  }

  for (i=0;i<number;i++){
    container.appendChild(document.createTextNode("Shelf " + (i+1) + ": ")); 
    var input=document.createElement("input");

    input.type="text";
    input.id="addedShelf" + (i+1);
    input.name="addedShelf" + (i+1);
    input.className="addedShelvesInput ui-corner-all";
    input.onkeypress=validate_numbers;
    
    container.appendChild(input);
    container.appendChild(document.createElement("br"));
  }

css:

.addedShelvesInput{
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 2px;
  width: 110px;
}
JoMojo
  • 404
  • 1
  • 7
  • 22
  • It feels like you've provided half the problem. When do you add the event handler in relation to the dynamic fields? What is the problematic CSS. Try and provide a [MCVE] that fully demonstrates the problem. – Jon P Oct 12 '22 at 01:02
  • @JonP I added a quick code snippet... if you enter a value, 1 for example, in the first input `here` appears in the second input. Hit the button it creates a new input field but when you add a value to it the `here` doesn't appear. Even though both inputs have the `.convertUnits` class. – JoMojo Oct 12 '22 at 01:34
  • 1
    The event handlers not being bound is a duplicate of https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements. The CSS however *does* apply to the new elements, please provide a [mcve] that demonstrates the problem with the styling if you need further help on this – Bergi Oct 12 '22 at 02:08
  • 1
    The short version of the duplicate, is you have bound the event handler **before** you have added the elements. The event binding only applies to the elements present tat the time of binding. You could use : `$("#container").on('keyup blur', '.convertUnits', function(event){ $('#test2').val('here');});` which uses delegation to handle dynamically added elements – Jon P Oct 12 '22 at 02:35
  • @JonP Thanks that helped a lot! This is what I'm using `$("#container").on('keyup blur', '.convertUnits', function(){ this.trigger('click') });` How do I reference the dynamically created element and it's value from within $(".convertUnits").on('keyup blur', function(event){}? – JoMojo Oct 12 '22 at 03:38
  • I editied the code snippet to add your modified suggestion... – JoMojo Oct 12 '22 at 03:47
  • Exactly as you've got it `$(this)` references the element that fires the event – Jon P Oct 12 '22 at 04:20
  • Figured out my problem, edited the code and question. – JoMojo Oct 12 '22 at 15:14

0 Answers0