How to disable reload when a tab is created dynamically?

Question

Hi All
I use jQuery dynamically create tabs, but each time I click one tab, it will reload the target URL again. How should I disable the reload behavior unless I want it reloads again? thanks a lot.

Answer 1

Use event.preventDefault():

$('a.tab').click(function(event) {
    event.preventDefault(); // this is the key
    // your code here
});

Edit: Regarding your comment – just set cache to true:

$(document).ready(function() {
    $apTabs = $("#apTabs").tabs({
        // ...
        cache: true, // this does the magic
        // ...
    });
});

Answer 2

$('#tabs').click(function(){
  // code
  return false;
});

Answer 3

Post my code for your reference:

 $(document).ready(function() {

        $apTabs = $("#apTabs").tabs({ 
           ajaxOptions: { async: true },
          cache:false,
          add: function(event, ui) {
              //immdeiately select the new created one
              $apTabs.tabs('select', '#' + ui.panel.id);
            }

          });

    });



  <div id="apTabs">
    <ul>
      <li></li>
    </ul>
    <div></div>
  </div>