"change" not working like "click"

Question

So I have a web page that looks like this to start with, essentially...

<div id="videonotes_container">

    <div id="videonotes_information">
        <div id="videonotes_name">Name</div>
        <div id="videonotes_points">100 points etc</div>

        <div id="videonotes_instructions">
            Instructions
        </div>

        **<div id="videonotes_quicklinks">
            <!-- this is where the quick links to the past comments go. -->
        </div>**
    </div>

    <div id="videonotes_video">
        <div id="videonotes_video_player"></div>
        <div id="videonotes_video_player_overlay"></div>    
    </div>

    <div id="videonotes_controls">
        <div id="videonotes_start" class="videonotes_videocontrol">-></div>
        <div id="videonotes_pause" class="videonotes_videocontrol">::</div>
        <div id="videonotes_stop" class="videonotes_videocontrol">STOP</div>
        <div id="videonotes_back30" class="videonotes_videocontrol">RW30</div>
        <div id="videonotes_forward30" class="videonotes_videocontrol">FF30</div>
    </div>

</div>

and the bit in bold is an area which is dynamically populated by javascript after the page has loaded, with a function that looks like this...

function videonotes_addNote(user_note_id, time, note, rating, feedback) {
// add a new div...
var html_fb = "";
var html_hl = "";

html_hl += "<div class=\"videonotes_note_time\">"+time.toFixed(0)+"</div>";
html_hl += "<div class=\"videonotes_note_note\" data-id=\""+user_note_id+"\" contenteditable>"+note+"</div>";
html_hl += "<div class=\"videonotes_note_comments\">"+rating+"</div>";

// iterate over the feedback and add it into the program.
feedback.forEach(function(value) {          
    html_fb += "<div class=\"videonotes_note_feedback_note\"><span class=\"videonotes_note_feedback_intro\">"+value.username+" ("+value.timestamp+") said</span> "+value.feedback+"</div>";
    html_fb += "<div class=\"videonotes_note_feedback_useful\" data-id=\""+value.noteid+"\">";
        html_fb += "<div class=\"videonotes_note_feedback_useful_yes videonotes_note_feedback_useful_button\">ACC</div>";
        html_fb += "<div class=\"videonotes_note_feedback_useful_no videonotes_note_feedback_useful_button\">NAC</div>";
    html_fb += "</div>";
});

// create a new note on the notes box...
var new_note = $('<div/>', { 'class':'videonotes_note' }).appendTo('#videonotes_quicklinks');

// add the headline to the div...
$('<div/>', { 'class':'videonotes_note_headline',  'html': html_hl, 'click':function(){ videonotes_clickNote(this, time); },}).appendTo(new_note);

// and add the feedback
$('<div/>', { 'class': 'videonotes_note_feedback', 'html': html_fb }).appendTo(new_note);
}

You will note there are a few bits created from this - there are onclick events created which will open feedback on this particular note and navigate to a part of a video. This all works just fine, and the onclick events work just fine for the dynamically created elements. The exception is that for each note you should be able to rewrite it in the div, so you can click the div with the note in, it will naviagte to the correct part of the video (works), it iwll open up the feedback (works) and when you EDIT the .videonotes_note_note class it will fire an update using this method:

    $('#videonotes_container').on("change", '.videonotes_note_note', function() { videonotes_update_note($(this).data('id'), $(this).value()); })

However this does not work. I have tried $(document) and all other parent, pre loaded divs I can think of but it still doesnt fire that particular event. There is no difference in the way I am creating this listener to the others, and all the clicks work fine, but the change doesnt.

Am I misunderstanding how the change element works?

Answer 1

change event is not supported on the div tag, you can get the list of input on which change event get fired . https://www.w3schools.com/jsref/event_onchange.asp