jQuery 我的输入不适用于新的被调用元素

Posted 2023-05-09

【中文标题】jQuery 我的输入不适用于新的被调用元素

【英文标题】：jQuery my enter doesn't work on new called elements

【发布时间】：2015-11-16 16:15:26

【问题描述】：

当 jQuery 生成新字段时，新字段不能与 'enter' 一起使用。

这是我的脚本：

咖啡

$('.teaser-form').keyup (e) ->
  if e.keyCode == 13
    $('.add-new-list').click()

form.haml

= f.simple_fields_for :products do |p|
  = render 'product_fields', :f => p 
.gear-item-add
  = link_to_add_association 'add item', f, :gears, class: "btn btn-default add-new-list"

因此，jQuery 调用了link_to_add_association 按钮，该按钮创建了如下所示的字段。 （第一个字段是初始字段，所以如果我按 Enter 键，则会生成第二个字段和第三个字段......但是如果我尝试继续第三个字段并按 Enter 键，则不会发生任何事情）

_product_field.haml

.nested-fields.gear-patrol
  .col-md-12
    = f.text_field :list, class: 'teaser-form form-control', placeholder: 'testing'

【问题讨论】：

看看this question。

@nnnnnn dang，看起来这将是正确的答案，但我无法弄清楚它如何与我所拥有的......

找到最近的在页面加载后不会改变的父级，并将 $('.teaser-form').keyup 替换为 $('.that_parent_we_are_talking_about').on('keyup', '. teaser-form', function() // 在这里做点什么 )

【参考方案1】：

试试这个，使用 jQuery

$('body').on('keyup', '.teaser-form', function(e) 

  if (e.keyCode == 13) 

    /* here you can put your code as:
    $('.add-new-list').click()
    */

    var _iDx = $('.teaser-form').length + 1; /*remove this line*/
    $(this).after('<input type="text" class="teaser-form" value="Field ' + _iDx + '">'); /*remove this line*/

    /*keep this code for auto focus to new element*/
    $('.teaser-form').last().focus();

  ;

);

.teaser-form 
  display: block;
  padding: 4px;
  margin: 2px;
  border-radius: 4px;
  border: 1px solid #266F6F;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="teaser-form" value="Field 1">

希望这会有所帮助..

【参考方案2】：

当您在寻找 CoffeeScript 和 haml 时，请在您的代码中试试这个：

$(document).on 'keyup', '.teaser-form', (e) ->
  if e.keyCode == 13
    $('.add-new-list').click()
  return

这就是它应该如何与@nnnnnn 带来的关于this question 的代码一起使用

【讨论】：

这个答案是处理这种情况的正确方法。 jQuery.live() 函数用于满足此需求，但已被 jQuery.on() 替换为以文档为目标。 keyup 事件将在文档范围内触发，包括动态添加的元素。

与绑定新元素相比，'on' 功能可能会慢一些

【参考方案3】：

将事件处理程序添加到新创建的元素

重新执行这段代码。

$('.teaser-form').keyup (e) ->
  if e.keyCode == 13
    $('.add-new-list').click()

或仅将处理程序添加到新创建的元素。

【讨论】：

您知道事件处理程序是如何工作的吗？创建新的 html 元素后重新运行此代码

我在上面的答案中做了

查看高亮部分

我如何调用新创建的元素，我想这就是我要问的...当我专注于输入字段，然后按回车，我如何使用 jQuery专注于新的输入字段并能够按 Enter 键？

【参考方案4】：

当您将处理程序绑定到一个类时，它会查找具有该类的所有现有对象并绑定逻辑——因此新创建的对象将没有处理程序，无论它们是否有班上。这是maazzaa's point。