jQuery on change not firing

Question

I'm trying to add a word from a word bank to a div on click. That is working correctly. Then when the user clicks on the word that has been added to the div, it will remove the word, and add it back to the word bank. right now, the on function isn't even firing, as log("changed"); isn't showing in console.

HTML:

<div id="Response"></div>

jQuery:

/*Append clicked word bank word to TextBox */
$(document).on('click', '.bank-word', function(event) {
    var myword = $(this).attr('word') + " ";
    $("#Response").append("<span class='myword' word='" + myword + "' ><b>" + myword + "</span>");  
    $(this).hide();
});

$(document).on('click', '.myword', function(event) {
    $(this).hide();
});

/*If User removes word from TextBox, add it back to word bank*/
$(document).on('change', '#Response', function(){
    log("changed");
    var words = $(this).val().split(' ');
    $('.bank-word').each(function(){
        if( words.indexOf( $(this).attr('word') ) !== -1 ){
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
});

log("changed"); isn't even firing.

EDIT:

How can I tell if a portion, let's say an appended span, has been added/removed to a div?

`
` isn't a *form* element, which I think `change` event is for."The [change event](https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change) is fired for ``, `` elements when a change to the element's value is committed by the user" - MDN Network — MackieeE, Feb 09 '14 at 00:11
@MackieeE how can I detect if portions added to a div have been modified? — user3871, Feb 09 '14 at 00:12
possible duplicate of [Detect element content changes with jQuery](http://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery) — Felix Kling, Feb 09 '14 at 00:13
another entry that may help: http://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div — CodeBird, Feb 09 '14 at 00:13
Does your `.on('click', '.myword'...)` line fire? If so, since you said you basically want to do something when a `.myword` element is clicked, wouldn't you want to put your "changed" code in there? — Paul Richter, Feb 09 '14 at 00:15
@Growler I personally would just call a function upon clicking `.bank-word` otherwise you'd have to either implement the suggestions, dummy a trigger or even do a mini-interval loop checking it's new contents or something! =) — MackieeE, Feb 09 '14 at 00:19

score 1 · Accepted Answer · answered Feb 09 '14 at 00:19

Change event is limited to <input> elements, <textarea> boxes and <select> elements. It does not fire on document when you change dom contents. However you could trigger the change event manually:

$(document).on('click', '.bank-word', function(event) {
    var myword = $(this).attr('word') + " ";
    $("#Response").append("<span class='myword' word='" + myword + "' ><b>" + myword + "</span>");  
    $(this).hide();

    $(document).trigger('change');
});

See the following for demonstration: http://jsfiddle.net/gTbX9/

Thanks. But this doesn't add the value back to the word bank nor does it fire the `log("changed")` — user3871, Feb 09 '14 at 06:25

jQuery on change not firing

1 Answers1