Weird Behavior of Jquery Children
<p>The first children call alerts the id of the form's direct children which is ul's id : "mainId". As far as I understand then this is the expected behavior of children but the second call subscribes the change event of both checkboxes which are not the direct children of the form. How come?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'&gt;&lt;/script&gt;
&lt;script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'&gt;&lt;/script&gt;
&lt;script&gt;
$(function() 
{

    $('.triggers').children().each(function(){
        alert($(this).attr("id"));
    });

    $(".triggers").children().change(function(e){
        alert(e.target.name)
    });
})
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;


&lt;form class="triggers" action="/askOrtal"&gt;
&lt;ul id="mainId"&gt; 
 &lt;li&gt;&lt;input type="checkbox" name="theCheckbox1"&gt;&lt;/li&gt; 
 &lt;li&gt;&lt;input type="checkbox" name="theCheckbox2"&gt;&lt;/li&gt; 
 &lt;li&gt;&lt;input type="submit" value="ClickMe"&gt;&lt;/li&gt;
 &lt;ul&gt;
 &lt;/form&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>
