keyup event fires on element that is updated from another element???

keyup event fires on element that is updated from another element???

I have 3 elements.  An update button (initially hidden), the code editor element and a preview div element.

The preview div's innerhtml is updated from the codemirror "update" event.  This is working great.

The preview div is set contenteditable="true" and I detect keyup events using the "on" delegate method from the body since it is added to the dom by the codemirror instance after page load.  The update button is revealed when the keyup event is detected on the preview div so I can pass the updated html back to my codemirror instance, because firing a "save" back to codemirror instantly removes focus from the editable preview thus making it ineffective for actual use.

The issue is that the keyup event, while only supposed to be watched on the actual preview div, fires when the codemirror instance is also updated.  So essentially, every time my codemirror updates (actually replaces) the html of the preview, the preview fires a keyup event???  This doesn't sound right but I have a fiddle that proves the undesired result.

I even tried watching events only if the element has focus but that didn't work either.