Using Knockout to trigger events when switching DIVs - html

Question

I'm looking to trigger an event (namely, a save/cancel dialog) when switching focus between text elements--with one caveat: it's not per element, it's per containing div.
I'll have multiple divs, each with the same controls. If any values are changed in one containing div and focus is switched to another, I need to determine if the knockout data I'm leaving is dirty and then trigger the event.
Does knockout support this kind of event binding or will I have to wire something else up? It looks like I could use the tabindex attribute on my divs but I'd prefer to use existing functionality in the framework if it's available.
A mockup of the code would look like this:
<div>
First Name: <input type="text" name="firstName"/><br/>
Last Name: <input type="text" name="lastName"/><br/>
Customer Type: <select>
<option value="Individual">Individual</option>
<option value="Corporate">Corporate</option>
</select>
</div>
<div>
First Name: <input type="text" name="firstName"/><br/>
Last Name: <input type="text" name="lastName"/><br/>
Customer Type: <select>
<option value="Individual">Individual</option>
<option value="Corporate">Corporate</option>
</select>
</div>

Answer 1

how about something like this. kind of jquery / knockout hybrid. clicking on an attribute brings up save button. after save and moving to a different div getting focus brings up save again.
function viewModel() {
var self = this;
this.currentDiv = ko.observable('');
this.isDirty = ko.observable(false);
this.save = function() {
self.isDirty(false)
}
}
var vm = new viewModel();
(function($) {
ko.applyBindings(vm); //bind the knockout model
$("input, select").not('#save').focus(function() {
var d = $(this).parent('div').attr('id');
if (d != vm.currentDiv() || vm.isDirty()) {
vm.isDirty(true);
} else {
vm.isDirty(false);
}
vm.currentDiv(d);
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> First Name:
<input type="text" name="firstName" />
<br/> Last Name:
<input type="text" name="lastName" />
<br/> Customer Type:
<select>
<option value="Individual">Individual</option>
<option value="Corporate">Corporate</option>
</select>
</div>
<div id="div2">
First Name:
<input type="text" name="firstName" />
<br/> Last Name:
<input type="text" name="lastName" />
<br/> Customer Type:
<select>
<option value="Individual">Individual</option>
<option value="Corporate">Corporate</option>
</select>
</div>
<input type="button" id="save" data-bind="visible: isDirty, click: save" value="save" />