jQuery my enter doesn't work on new called elements

Question

When new fields are being produced by jQuery, the new fields doesn't work with 'enter'.

This is my script:

coffee

$('.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"

So the jQuery calls onto the link_to_add_association button which creates the fields shown below. (the first field is the initial, so if I press enter, second field and third field is produced... but if I try to go on the third field and press enter, nothing happens)

_product_field.haml

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

Have a look at [this question](http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements). — nnnnnn, Aug 23 '15 at 00:15
@nnnnnn dang, it looks like it would be the right answer, but I can't figure out how it would work with what I have... — hellomello, Aug 23 '15 at 00:22
Find the nearest parent that doesn't change after page load and replace $('.teaser-form').keyup by $('.that_parent_we_are_talking_about').on('keyup', '.teaser-form', function() { // do something here }) — Bene, Aug 25 '15 at 21:30

score 5 · Accepted Answer · answered Aug 26 '15 at 09:26

Try This, Using 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">

Hope this helps..

score 5 · Answer 2 · edited May 23 '17 at 12:03

5

As you were looking for CoffeeScript and haml, try this in your code :

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

This is how it should work with your code regarding this question brought by @nnnnnn

edited May 23 '17 at 12:03

Community

1
1

answered Aug 31 '15 at 12:50

bviale

5,245
3
28
48

1

This answer is the correct way of handling this situation. The jQuery.live() function used to satisfy this need, but has been replaced by jQuery.on() with the document as the target. The keyup event will then be fired in the document scope, including dynamically added elements. – GKnight Aug 31 '15 at 19:28
the 'on' function may be a bit slower compared to binding new elements tough – maazza Sep 04 '15 at 10:32

maazza · Answer 3 · 2015-08-24T16:17:55.003

0

Add the event handlers to the newly created elements

re execute this code.

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

Or add the handler to the newly created elements only.

edited Aug 24 '15 at 16:17

answered Aug 23 '15 at 00:49

maazza

7,016
15
63
96

do you know how event handlers work ? rerun this code AFTER you create new html elements – maazza Aug 23 '15 at 03:26
I did in the answer above – maazza Aug 23 '15 at 20:01
see the highlighted part – maazza Aug 24 '15 at 06:54
How do I call on to the newly created elements, I guess that's what I'm ask... When I'm focused on the input field, and then press enter, how do I use jQuery to focus on the new input fields and be able to press enter? – hellomello Aug 24 '15 at 14:48

score 0 · Answer 4 · edited May 23 '17 at 12:14

0

When you bind a handler to a class it looks for all existing objects with that class and binds the logic -- so newly-created objects won't have the handler, whether or not they have the class. This is maazzaa's point.

edited May 23 '17 at 12:14

Community

1
1

answered Aug 24 '15 at 16:38

shabs

718
3
10

jQuery my enter doesn't work on new called elements

4 Answers4