trigger existing event on appended elements

Question

I'm trying to get both blur and keypress(13) to do the same thing on an element that has been appended. An obvious use for trigger(), right? Not working. I'm hoping I'm just being stupid and missing something obvious.

$(document).ready (function() {
  $("#btn").click (function() {
    $("#this-ul").append ("<li><input id='input1' type='text'></li><li><input type='text' id='input2'></li>");
    $("#input1").focus();
  });
  $("#this-ul").on ("blur", "#input1", function() {
    $("#input2").val ("blurred");
  });
  $("#this-ul").on ("keypress", "#input1", function (e) {
    if (e.which == 13) {
      // Want to trigger $("#this-ul").on ("blur"...) as above
    }
  });
});

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<button id="btn" type="button">Click</button>
<ul id="this-ul"></ul>

Use classes `.myClass` instead of id's in handler definitions. `$("#this-ul").on ("keypress", ".inputs", function (e) {...` — Alex Kudryashev, Jun 23 '16 at 17:04
You're getting the error because at the time your handler is bound there is no element with id `#input1`. Use classes as @AlexKudryashev suggests and you should be in ok shape. — Brian Driscoll, Jun 23 '16 at 17:13
@Brian Driscoll: `input1` and `input2` are the content of the appended element. — Louys Patrice Bessette, Jun 23 '16 at 17:21
@Teemu: I'm not sure it's a duplicate. I think it only it is a "how to use `.trigger` method". — Louys Patrice Bessette, Jun 23 '16 at 17:24

score 0 · Accepted Answer · answered Jun 23 '16 at 17:14

0

Try this :

$(document).ready (function() {
    $("#btn").click (function() {
        $("#this-ul").append ("<li><input id='input1' type='text'></li><li><input type='text' id='input2'></li>");
        $("#input1").focus();
    });
    $("#this-ul").on ("blur", "#input1", function() {
        $("#input2").val ("blurred");
    });
    $("#this-ul").on ("keypress", "#input1", function (e) {
        if (e.which == 13) {
            $(this).trigger("blur");
        }
    });
});

Fiddle here : https://jsfiddle.net/2b10cyez/

On blur of input 1, input 2 gets the value "blurred".
And on [enter] keypress, the blur event is triggered.

answered Jun 23 '16 at 17:14

Louys Patrice Bessette

33,375
6
36
64

I don't understant the downvote... Since the **Fiddle IS working** as the OP asked. – Louys Patrice Bessette Jun 23 '16 at 19:09
1

This will work! I knew it was something I'd just plain missed. – DonSea Jun 23 '16 at 19:33
1

Maybe I should have said $(this) will work. :-) – DonSea Jun 24 '16 at 01:24
`$(this).trigger("success");` is my current brain-spin... I try ! :-D – Louys Patrice Bessette Jun 24 '16 at 02:16

trigger existing event on appended elements

1 Answers1