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() { 中不可访问，因此在第二个函数中复制它

编辑：说清楚：

$('#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为全局变量

► 从“新建人物”按钮的 ID 中删除 #。

工作演示

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>

Jquery .on() 的问题

Problems with Jquery .on()

javascript

jquery

dynamically-generated