Page reloading inspite of using preventDefault() function
<p>I am using jquery ajax to post a form to my node.js server. I am trying to prevent the page from refreshing ( since trying to develop a SPA) using preventDefault function, but surprisingly it is redirecting. And moreover, the data is being passed to the node express server very smoothly. But somehow it is skipping a couple of line it seems.
When I'm trying this in a basic POC, everything is working fine and it is preventing page refresh.</p>

<pre><code> $(document).ready(function(){
$('#submit').click(function(event){
//$("form#foodForm").submit(function(event) {
window.alert( event.isDefaultPrevented() );
event.preventDefault();
window.alert( event.isDefaultPrevented() );
  console.log("form submitted");
   // Prevents the page from refreshing
  var $this = $(this); // `this` refers to the current form element
  $.post(
      '/submittedData', // Gets the URL to sent the post to
      $this.serialize(), // Serializes form data in standard format
      function(data) {
      console.log(data); /** code to handle response **/ },
      "json" // The format the response should be in
  );
});

});
</code></pre>

<p>app.js code:</p>

<pre><code>    app.post('/submittedData',function(req,res){
  console.log('body: ' + JSON.stringify(req.body));
});
</code></pre>

<p>HTML piece:</p>

<pre><code>&lt;form id="foodForm" action="/submittedData" method="post"&gt;

   &lt;ul&gt; Main course
   &lt;li&gt; &lt;input type="checkbox" name="items[]" value="roti"&gt;Roti &lt;/li&gt;
    &lt;li&gt;&lt;input type="checkbox" name="items[]" value="biryani"&gt;Biryani&lt;/li&gt;
    &lt;li&gt;&lt;input type="checkbox" name="items[]" value="rice"&gt;Rice&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul&gt; On the side
    &lt;li&gt;&lt;input type="checkbox" name="items[]" value="chicken"&gt;Chicken&lt;/li&gt;
    &lt;li&gt;&lt;input type="checkbox" name="items[]" value="mutton"&gt;Mutton&lt;/li&gt;
    &lt;/ul&gt;


&lt;button id="submit"&gt;Submit&lt;/button&gt;
  &lt;!-- &lt;input type="submit" value="submit" id="submit" &gt; --&gt;

&lt;/form&gt;
</code></pre>