How to insert fields using jQuery?

Question

I'm trying to realise this code in the snippet, for the moment I'm working only on the button Label, so when I click on this button, it adds a small formular that allows to creat this a label in the right side by clicking on OK. However, even if I click on OK nothing happens, normally a label should appear with the name inserted in the textfield "label".

Does anyone know where is the problem? Thank you in advance.

$(function(){
 $('button').click(function(){
  var typeButton = $(this).text();
  if(typeButton=='Label'){
   $('hr').remove();
   $('#formule').remove();
   $('#droite').append('<hr>');
   var elementLabel = 'Texte du label';
   var elementTexte = '<input type="text" name="label"/>';
   var elementButton = '<button>OK</button>';
   var elementSpan = elementLabel+' '+elementTexte+' '+elementButton;
   var elementDiv = '<div id="formule">'+elementSpan+'</div>'
   $(elementDiv).insertAfter('hr');
  };
  if(typeButton=='OK'){
      $('hr').remove();
   var elementNom = $('input[name=label]').val();
   var elementSpan = '<span>'+elementNom+'</span>';
   $('#formule').remove();
   $('#gauche').append('elementSpan');
  };
 });
});

body {
        margin: 0;
      }
      #gauche {
        float: left;
        width: 70%;
        height: 1000px;
        background-color: #EFECCA;
      }
      #droite {
        background-color: #CEFFF8;
        height: 1000px;
        padding : 10px;
        padding-left: 71%;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="gauche">
</div>
<div id="droite">
      Utilisez ces boutons pour créer votre formulaire<br><br>
      <button>Label</button>
      <button>Zone de texte</button>
      <button>Bouton</button>
</div>

you want to attach event to dynamically created element - see [this](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jaromanda X, Jul 24 '16 at 00:19

A.Youssouf · Accepted Answer · 2016-07-24T02:06:26.813

you need to delegate dynamically added elements using on event handler attachment with the document.

$(document).on('click', 'button', function () {
        var typeButton = $(this).text();
        if (typeButton == 'Label') {
            $('hr').remove();
            $('#formule').remove();
            $('#droite').append('<hr>');
            var elementLabel = 'Texte du label';
            var elementTexte = '<input type="text" name="label"/>';
            var elementButton = '<button>OK</button>';
            var elementSpan = elementLabel + ' ' + elementTexte + ' ' + elementButton;
            var elementDiv = '<div id="formule">' + elementSpan + '</div>'
            $(elementDiv).insertAfter('hr');
        };
        if (typeButton == 'OK') {
            $('hr').remove();
            var elementNom = $('input[name=label]').val();
            var elementSpan = '<span>' + elementNom + '</span>';
            $('#formule').remove();
            $('#gauche').append(elementSpan);
        };
    });

score 0 · Answer 2 · answered Jul 24 '16 at 00:22

It's because the button that gets generated to the DOM (OK) doesn't have an event listener attached to it, so it has nothing to do when being pressed. $('button').click() doesn't get updated any time the DOM changes, so you have to do it yourself.

$(function() {
  function listenToButtons() {
    $('button').off().on('click', function() {
      var typeButton = $(this).text();
      if (typeButton == 'Label') {
        $('hr').remove();
        $('#formule').remove();
        $('#droite').append('<hr>');
        var elementLabel = 'Texte du label';
        var elementTexte = '<input type="text" name="label"/>';
        var elementButton = '<button>OK</button>';
        var elementSpan = elementLabel + ' ' + elementTexte + ' ' + elementButton;
        var elementDiv = '<div id="formule">' + elementSpan + '</div>'
        $(elementDiv).insertAfter('hr');
        listenToButtons();
      };
      if (typeButton == 'OK') {
        $('hr').remove();
        var elementNom = $('input[name=label]').val();
        var elementSpan = '<span>' + elementNom + '</span>';
        $('#formule').remove();
        $('#gauche').append('elementSpan');
      };
    });
  }
  listenToButtons();

});

It still doesn't work, and it says .off is unknow as a function. — Chinovski, Jul 24 '16 at 00:47
Hmm, try here. https://jsfiddle.net/ofvymv6q/ Also, your `$('#gauche').append('elementSpan');` should be `$('#gauche').append(elementSpan);` — Eddimull, Jul 24 '16 at 00:56

How to insert fields using jQuery?

2 Answers2