title: Download multiple CSV file attached to <a> using trigger "click" doesn't work
body: <p>I'm trying to create and export from my application (<strong>CLIENT SIDE</strong>), a bunch of CSV files. For the export part, this is the path I've followed so far (FYI, I'm also using jquery mobile for the UI part):</p>
  
  <ol>
  <li>I create an <code>&lt;a&gt;</code> in the HTML with <code>href='#</code></li>
  <li>I set <code>download</code>,<code>target</code> and <code>href</code> attributes of that <code>&lt;a&gt;</code> using jquery, passing respectively the filename, the file content (a string) and the <code>_blank</code> value.</li>
  </ol>
  
  <p>This is the code, to make it more clear:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;a href="#" id="btn1" data-role="button"&gt;download 1&lt;/a&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$("#btn1").attr({
      'download' : 'file1.csv',
      'href' : "file;one",
      'target' : '_blank'
  });
  </code></pre>
  
  <p>The resulting button works fine, the file is correctly downloaded as you can see here: <a href="http://jsfiddle.net/dKwp8/2/" rel="nofollow"><strong>FIDDLE</strong></a> (the downloaded file seems to be broken, but I think is a fiddle thing.. locally, it works great)</p>
  
  <p>Now, as I said before, I need to export more than one CSV file at once. My approach is to create as many <code>&lt;a&gt;</code> as I need, set the <code>download</code>,<code>target</code> and <code>href</code> attributes for each <code>&lt;a&gt;</code> and then create a <code>download_all-button</code> that, sequentially, triggers each button's click. This is the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="mypage" data-role="page"&gt;
      &lt;a href="#" id="btn1" data-role="button"&gt;download 1&lt;/a&gt;
      &lt;a href="#" id="btn2" data-role="button"&gt;download 2&lt;/a&gt;
      &lt;a href="#" id="btn3" data-role="button"&gt;download 3&lt;/a&gt;
      &lt;a href="#" id="downloadall" data-role="button" &gt;DOWNLOAD ALL&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$("#btn1").attr({
      'download' : 'file1.csv',
      'href' : "file;one",
      'target' : '_blank'
  });
  $("#btn2").attr({
      'download' : 'file2.csv',
      'href' : "file;two",
      'target' : '_blank'
  });
  $("#btn3").attr({
      'download' : 'file3.csv',
      'href' : "file;three",
      'target' : '_blank'
  });
  $("#downloadall").on("click", function(){
     document.getElementById("btn1").click();
     document.getElementById("btn2").click();
     document.getElementById("btn3").click();
  });
  </code></pre>
  
  <p>Again, here's the fiddle : <a href="http://jsfiddle.net/dKwp8/3/" rel="nofollow"><strong>FIDDLE DOWNLOAD ALL</strong></a></p>
  
  <p>This seems to work too, great! <strong>Now the questions</strong>:</p>
  
  <ol>
  <li>is the right approach? I didn't find a lot more on the internet about "export a csv using JS client side"..</li>
  <li>why it does work using the <code>.click()</code> and it doesn't work calling jQuery <code>.trigger("click")</code>? (see fiddle here: <a href="http://jsfiddle.net/dKwp8/4/" rel="nofollow"><strong>TRIGGER CLICK</strong></a></li>
  <li>In firefox, that piece of code seems to open new tabs instead of downloading the file.. is related to the <code>download</code> attribute?</li>
  </ol>
  
  <p>Thanks in advance for your help, best regards</p>