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 — Jaromanda X
– Jaromanda X, Commented Jul 24, 2016 at 0:19

A.Youssouf · Accepted Answer · 2016-07-24 02:06:26Z

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);
        };
    });

Eddimull · Accepted Answer · 2016-07-24 00:22:34Z

0

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();

});

answered Jul 24, 2016 at 0:22

Eddimull

3421 silver badge8 bronze badges

2 Comments

Chinovski Over a year ago

It still doesn't work, and it says .off is unknow as a function.

Eddimull Over a year ago

Hmm, try here. jsfiddle.net/ofvymv6q Also, your $('#gauche').append('elementSpan'); should be $('#gauche').append(elementSpan);

Collectives™ on Stack Overflow

How to insert fields using jQuery?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related