Question

For some reason, when I use the data-bind=”with: detailedStudent” the jQuery change() binding does not get called. I’m dynamically populating the select options but I’m not sure that should matter. This is some of the code I’m using just to try to give a decent picture of what’s going on:

var viewModel;
$(document).ready(function() {  
    viewModel = new StudentViewModel();
    ko.applyBindings(viewModel); 

    // this change event is not getting called, but if i put the onchange directly into the html as an attribute, it works fine.
    $("#accountDialog").find("#mySelect").change(function() {
        alert('hi');
    }
}

function Student(data) {
    var self = this;    
    ko.mapping.fromJS(data, {}, this);                
}

function StudentViewModel() {
    var self = this;    
    this.students = ko.observableArray([]);    
    this.detailedStudent = ko.observable(); 
}

<div id="accountDialog" class="modal hide fade" data-bind="with: detailedStudent">
    <select id="mySelect" name="mySelect" data-bind="value: GraduationClassId"></select>
</div>

Answer 1

The with binding is a wrapper to the template binding. It copies off the child elements and uses them as the template. So, if your detailedStudent is changing, then KO will be rendering new elements each time that did not have the event handler attached to it.

Some alternatives:

• use a binding to attach the event handler (can use event binding)
• create a manual subscription against your detailedStudent observable and perform your action in the view model (best option, if your action does not involve DOM manipulation)
• try to use a delegated event handler like jQuerys $.on() http://api.jquery.com/on/.