title: Trigger function on click
body: <p>I have a series of DIVs like this:</p>
  
  <pre><code>&lt;div class="a" onclick="Test();"&gt;&lt;/div&gt;
  &lt;div class="b" onclick="Test();"&gt;&lt;/div&gt;
  &lt;div class="c" onclick="Test();"&gt;&lt;/div&gt;
  ...
  
  function Test(){
  ...
  $.ajax({
     type: "POST",
     url: url,
     data: "somedata=" + somedata,
     contentType: 'application/x-www-form-urlencoded; charset=utf-8',
     dataType: "html",
     success: function (msg) {           
        var owl = $('.carousel-Class');
        owl.trigger('destroy.owl.carousel');
        owl.owlCarousel({
           ...
        })  
  }
  </code></pre>
  
  <p>and I want trigger this function on page load on a specific div (I.E. div with class 'b'):</p>
  
  <pre><code>$(document).ready(function(){
      $(".b").trigger('click');
  })
  </code></pre>
  
  <p>The result is that the Owl Carousel items don't appear correctly, they have different size than they should have. For appear correctly I need to do an extra click on the DIV.</p>
  
  <p>Any idea? </p>