Проблемы с JQuery .on()

Question

Я пытаюсь использовать .on(), чтобы добавить текстовое поле при щелчке динамически созданной кнопки. Однако по какой-то причине я не могу заставить ее работать. Кто-нибудь видит, что случилось? Спасибо за любую помощь и извините, если это что-то очевидное (я боюсь, что это может быть, но я просто не вижу этого).

$('#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>

Answer 1

Удалить # от кнопку New Person-х id.

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

Объявить prs вне события щелчка, как следующее.

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

Answer 2

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

не является глобальной переменной, и недоступна внутри $('div#example').on('click', '#addpersonbutton', function() { так дублировать его внутри второй функции

EDIT: чтобы было ясно:

$('#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); 
}); 

Answer 3

Изменения Я сделал

► Объявленная переменная prs как глобальная переменная

► Удалить # с идентификатора кнопки New Person.

Рабочая Демонстрационный

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>