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

我所做的更改

►声明变量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>

Answer 2

从#按钮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 3

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

Jquery .on（）的问题

3 个答案: