why $.ajax does not work with me?
<p>i don't know why $.ajax never called on my code ?
i use xampp as localhost 
jquery called ok , so when i click on the button , the text below it changed .. but $.ajax part never execute ?</p>

<p>my page : </p>

<pre><code> &lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;test&lt;/title&gt;
&lt;link rel="stylesheet" href="layout/css/bootstrap.css"&gt;
&lt;link rel="stylesheet" href="layout/css/font-awesome.min.css"&gt;
&lt;link rel="stylesheet" href="layout/css/mystyle.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container"&gt;
&lt;div class="alert alert-danger"&gt; alerts alerts &lt;/div&gt;
&lt;div class="alert alert-danger"&gt; alerts alerts &lt;/div&gt;
&lt;div class="alert alert-danger"&gt; alerts alerts &lt;/div&gt;
&lt;button id="btn" class="btn btn-primary"&gt;cliquer ici &lt;/button&gt;
&lt;/div&gt;
&lt;script type="text/javascript" src="layout/js/jquery-1.12.4.min.js"&gt;
&lt;/script&gt;
&lt;script type="text/javascript" src="layout/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="layout/js/myjs.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>my js : </p>

<pre><code>$(document).on('click','#btn',function(){
    var ID =$(this).attr('id');
    $(this).html("loading ... ");
    $.ajax({
        type:"POST",
        url:"http://localhost/my_projects/testing/moremore.php",
        data:"id="+ID,
        success: function(html){
            $('.container').append(html);
            $('#btn').html("done");
        }
    });
    $(this).html("hmmmm ... ");
});
</code></pre>

<p>and my moremore.php :</p>

<pre><code>&lt;div class="alert alert-success"&gt; alerts alerts by ajax &lt;/div&gt;
</code></pre>