jQuery change event does not trigger in my browser (in jsfiddle is does)

Question

I want that everytime a textbox gets changed that one function gets executed. For this I have this code:

var div = document.getElementById("tree");

var input = document.createElement('input');
input.id = 123;
input.type = "text";

div.appendChild(input);

$("input").change(function() {
  alert("The text has been changed.");
});

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

It even works here in the "Run code snippet".

I use a new version of Chromium for this and I open the HTML file locally. Does someone have an idea?

Are you creating elements dynamically i.e. on button click or loading via ajax? Try `$('#tree').on("change","input",function() {` — Satpal, Jul 26 '18 at 12:19
@Satpal Im Creating elements dynamicly inside of $(document).ready(function(){}) — JonDoe789, Jul 26 '18 at 12:20
@JonDoe789. can you check in other browsers as well. Paste your entire code — Sudharshan Nair, Jul 26 '18 at 12:21
is that dom element or a live element ? Most of the time dom events does not work with live elements. — Senior PHP Developer, Jul 26 '18 at 12:41

score 3 · Answer 1 · answered Jul 26 '18 at 12:20

3

Use keyup or input events instead change.

change event is only triggered on lost focus. source

answered Jul 26 '18 at 12:20

Programmer

1,973
1
12
20

I only want to fire it when the user presses enter or leaves the textbox. Not with every key stroke. – JonDoe789 Jul 26 '18 at 12:24
Oh, I missed that. Anyway, you can also listen to the `keydown` event, and check is it the enter key (keycode 13 if I'm not wrong). – Programmer Jul 26 '18 at 12:26

score 1 · Answer 2 · answered Jul 26 '18 at 12:27

Please use blur event for triggering the event on leaving the textbox with change . Let me know if this helps you.

var div = document.getElementById("tree");

var input = document.createElement('input');
input.id = 123;
input.type = "text";

div.appendChild(input);

$("input").on('blur',function() {
  alert("The text has been changed.");
});

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

score 0 · Answer 3 · answered Jul 26 '18 at 12:42

This code works fine in Google Chrome : Version 67.0.3396

<!-- index.html -->
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $( document ).ready(function() {

    var div   = document.getElementById("tree");
    var input = document.createElement('input');
    input.id  = 123;
    input.type= "text";

    div.appendChild(input);

    $("input").change(function() {
      alert("The text has been changed.");
    });
  });
  </script>
</head>
  <body>
  <div id="tree"></div>
  </body>
</html>

score 0 · Answer 4 · answered Jul 26 '18 at 12:45

0

Please try this:--

$(document).ready(function() {
    $('input').on('change keyup', function() {
        alert("The text has been changed.");
    });
});

answered Jul 26 '18 at 12:45

Senior PHP Developer

318
2
15

score 0 · Answer 5 · answered Jul 26 '18 at 13:05

2 probleme here

First: The event will not fire since .change not working on dynamic created items. Please refer to https://stackoverflow.com/a/1207393/4798459

if your page was dynamically creating elements you would bind the event to a parent which already exists
Second: The .change method is not really what you looking for. You might want to take input event, see more jQuery 'input' event

The code you need will be something like this. where the first parameter is the event name and the second is the child css selector

$("#tree").on("input", "input", funtion(){
    alert("The text has been changed.");
});

You can learn more about event delegation here : http://learn.jquery.com/events/event-delegation/

Also, if you assign a value in your code you might want to trigger input event to.

$("yourCssSelector").trigger("input");

It will trigger the event input

jQuery change event does not trigger in my browser (in jsfiddle is does)

5 Answers5