Applying Events Handler to Child Elements (Event Propogation in jQuery)
<p><em><strong>Edit :</strong> Problem wasn't related Event Propagation, if you want to know how to stop propagation in jQuery, then use <code>event.stopPropagation();</code></em></p>

<p>When user moves his/her mouse over <code>&lt;span&gt;</code> element my jQuery code appends an <code>&lt;img&gt;</code>into this <code>&lt;span&gt;</code> element and when he moves out his mouse off <code>&lt;span&gt;</code> than the element appended is removed. It helps people to edit the field when clicking on the appended <code>&lt;img&gt;</code> element.</p>

<p>The reason I used <code>append()</code> method to add <code>&lt;img&gt;</code> into <code>&lt;span&gt;</code> is because I want to keep <code>&lt;img&gt;</code> element visible when user moves his mouse over to appended <code>&lt;img&gt;</code> element <em>(<code>&lt;img&gt;</code> is becoming <code>&lt;span&gt;</code>'s child element)</em> But it didn't happen and when user moves his mouse over it <code>&lt;img&gt;</code> is being deleted. I am thinking it is because event propagation but I couldn't find how to activate it in jQuery as we do with <code>addEventListener</code> in Firefox based browsers.</p>

<p>Here is the code :</p>

<p><strong>JQuery Code :</strong></p>

<pre><code>$(document).ready(function() {
    $('.EditEnabled').bind("mouseover", ShowEditFields);
    $(".EditEnabled").bind("mouseout", HideEditFields);
});

function ShowEditFields(event) {    
    $(event.target).append(" &lt;img id='editImg' src='images/edit.png' style='margin-bottom:-3px'/&gt;");
}

function HideEditFields(event) {
    $(event.target).children("#editImg").remove();
}
</code></pre>

<p><strong>Simple HTML :</strong></p>

<pre><code>&lt;span id="something" class="EditEnabled"&gt;Something Here&lt;/span&gt;
</code></pre>

<p>Can you explain my how to solve it.</p>

<p>Thank you.</p>
