CODEWITHSUNDEEP
javascriptjquerydynamically-generated
neanderslob
neanderslob

Reputation: 2703

Problems with Jquery .on()

I'm attempting to use .on() to add a text field when a dynamically created button is clicked. However, for whatever reason, I can't seem to get it working. Anyone see what's wrong? Thanks for any help and sorry if it's something obvious (I'm afraid that it might be but I just can't see it).

$('#the-basics input.typeahead').keyup(function() {
  var prs = $(this).val().split(' ');
  if (!$("#the-basics span.newEntityButtons").length) {
    var $newEntity = $('<span class="newEntityButtons">' + '</span>');
    $newEntity.appendTo($("#the-basics"));
    var $newPerson = $('<input type="button" value="New Person" id="addpersonbutton" class="newHolder newPerson" />');
    $newPerson.appendTo($("span.newEntityButtons"));
  }
});

$('div#example').on('click', '#addpersonbutton', function() {
  var epo = new Date().getTime();
  var theelement = '<span class="nested-fields person">' +
    '<input id="stockholder_people_attributes_' + epo + '_fname" name="stockholder[people_attributes][' + epo + '][fname]" value="' + prs[0] + '">' +
    '<a class="glyphicon glyphicon-trash remove_fields existing" href="#"></a>' +
    '</span>';
  $('div.new_person.new_fields').prepend(theelement);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
  <div id="the-basics">
    <input class="typeahead">
  </div>
  <div class="new_person new_fields">
  </div>
</div>

Upvotes: 0

Views: 61

Answers (3)

llamerr
llamerr

Reputation: 3186

var prs = $(this).val().split(' ');

is not a global variable, and inaccessible inside $('div#example').on('click', '#addpersonbutton', function() { so duplicate it inside your second function

EDIT: to make it clear:

$('#the-basics input.typeahead').keyup(function() {
    var prs = $(this).val().split(' ');
    if (!$("#the-basics span.newEntityButtons").length) {
        var $newEntity = $('<span class="newEntityButtons">' + '</span>');
        $newEntity.appendTo($("#the-basics"));
        var $newPerson = $('<input type="button" value="New Person" id="addpersonbutton" class="newHolder newPerson" />');
        $newPerson.appendTo($("span.newEntityButtons"));
    }
});

$('div#example').on('click', '#addpersonbutton', function() {
    var prs = $(this).val().split(' ');
    var epo = new Date().getTime();
    var theelement = '<span class="nested-fields person">' +
        '<input id="stockholder_people_attributes_' + epo + '_fname" name="stockholder[people_attributes][' + epo + '][fname]" value="' + prs[0] + '">' +
        '<a class="glyphicon glyphicon-trash remove_fields existing" href="#"></a>' +
        '</span>';
    $('div.new_person.new_fields').prepend(theelement);
});

Upvotes: 1

Rino Raj
Rino Raj

Reputation: 6264

Changes I made

► Declared variable prs as a global variable

► Remove # from the New Person button's id.

Working Demo

var prs = '';
$('#the-basics input.typeahead').keyup(function() {
  prs = $(this).val().split(' ');
  if (!$("#the-basics span.newEntityButtons").length) {
    var $newEntity = $('<span class="newEntityButtons">' + '</span>');
    $newEntity.appendTo($("#the-basics"));
    var $newPerson = $('<input type="button" value="New Person" id="addpersonbutton" class="newHolder newPerson" />');
    $newPerson.appendTo($("span.newEntityButtons"));
  }
});

$('div#example').on('click', '#addpersonbutton', function() {
  var epo = new Date().getTime();
  var theelement = '<span class="nested-fields person">' +
    '<input id="stockholder_people_attributes_' + epo + '_fname" name="stockholder[people_attributes][' + epo + '][fname]" value="' + prs[0] + '">' +
    '<a class="glyphicon glyphicon-trash remove_fields existing" href="#"></a>' +
    '</span>';
  $('div.new_person.new_fields').prepend(theelement);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
  <div id="the-basics">
    <input class="typeahead">
  </div>
  <div class="new_person new_fields">
  </div>
</div>

Upvotes: 2

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

Remove # from the New Person button's id.

var $newPerson = $('<input type="button" value="New Person" id="addpersonbutton" class="newHolder newPerson" />');

Declare prs outside the click event like following.

var prs;

$('#the-basics input.typeahead').keyup(function () {
    prs = $(this).val().split(' ');
    if (!$("#the-basics span.newEntityButtons").length) {
        var $newEntity = $('<span class="newEntityButtons">' + '</span>');
        $newEntity.appendTo($("#the-basics"));
        var $newPerson = $('<input type="button" value="New Person" id="addpersonbutton" class="newHolder newPerson" />');
        $newPerson.appendTo($("span.newEntityButtons"));
    }
});

Upvotes: 1

Related Questions