Handling Image Click Event in a ContentEditable region

Question

I am trying to customize jwysiwyg jquery RTE. I would like to build an image attributes editor so that once an image is inserted into the editable region, the user would select it and then a modal window or properties panel would appear allowing the user to edit the width/height etc. Analogous to gmails image insert UI.

The problem is I am having trouble finding out how to handle the necessary image click event. Anyone know some example code or some info for where I can start?

Answer 1

I am just starting on something similar. Using jQuery's delegate() method, I got it to work like this:

$("#bodyoftheeditordocument").delegate("img", "click", function (evt) {
   // handle click event here...
});

The cool thing about the delegate method is that it will attach this event handler to any img tag in the body, present or future. So even images inserted as part of the editing process with get wired up.

Good luck.

Mark