javascript - "change"不像 "click"那样工作

Question

所以我有一个看起来像这样的网页，本质上是......

<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>

粗体部分是页面加载后由 javascript 动态填充的区域，其函数如下所示...

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);
}

您会注意到由此创建了一些位 - 创建了 onclick 事件，这些事件将打开对此特定注释的反馈并导航到视频的一部分。这一切都工作得很好，并且 onclick 事件对于动态创建的元素也工作得很好。异常(exception)的是，对于每个注释，您应该能够在 div 中重写它，因此您可以单击包含注释的 div，它将导航到视频的正确部分(有效)，它会打开反馈(有效)，当您编辑 .videonotes_note_note 类时，它将使用此方法触发更新:

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

但是这不起作用。我已经尝试过 $(document) 和我能想到的所有其他父级、预加载的 div，但它仍然不会触发该特定事件。我为其他监听器创建此监听器的方式没有任何区别，所有点击都可以正常工作，但更改却不然。

我是否误解了更改元素的工作原理？

Answer 1

div 标签不支持更改事件，您可以获取触发更改事件的输入列表。 https://www.w3schools.com/jsref/event_onchange.asp