title: Disable clicks when the tab has been clicked in jquery?
body: <p>I am having this problem.
  In my code when I repeatedly click on the tab: mod-2 or mod-3, the border will continue to expand. How to stop when the tab is clicked?</p>
  
  <p>Problem 2: How do I check if code div class="l-item" already exists in html? If it already exists, will the .wrapInner in js stop running?:</p>
  
  <pre><code>$('.vd-list li').wrapInner('&lt;div class="l-item"&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>Demo: <a href="http://jsfiddle.net/b9tcvjxg/" rel="nofollow noreferrer">http://jsfiddle.net/b9tcvjxg/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.mod-1').on('click', function() {
    $('.display-tab .on').removeClass('on');
    $(this).addClass('on');
    $('.vd-list').removeClass('mod-2').removeClass('mod-3').addClass('mod-1');
    $('.vd-list .l-item').contents().unwrap();
    $('.vd-list .v-date, .vd-list .v-info-i:last-child, .vd-list .v-desc').show();
  });
  
  $('.mod-2').on('click', function() {
    $('.display-tab .on').removeClass('on');
    $(this).addClass('on');
    $('.vd-list').removeClass('mod-1').removeClass('mod-3').addClass('mod-2');
    $('.vd-list li').wrapInner('&lt;div class="l-item"&gt;&lt;/div&gt;');
    $('.vd-list .v-date, .vd-list .v-info-i:last-child').hide();
    $('.vd-list .v-desc').show();
    return false;
  });
  
  $('.mod-3').on('click', function() {
    $('.display-tab .on').removeClass('on');
    $(this).addClass('on');
    $('.vd-list').removeClass('mod-1').removeClass('mod-2').addClass('mod-3');
    $('.vd-list li').wrapInner('&lt;div class="l-item"&gt;&lt;/div&gt;');
    $('.vd-list .v-date, .vd-list .v-info-i:last-child, .vd-list .v-desc').hide();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tab-list {
    display: inline-block;
    vertical-align: middle;
  }
  
  .tab-list li {
    float: left;
    height: 48px;
    line-height: 48px;
    margin-right: 20px;
    cursor: pointer;
    color: #222;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
  }
  
  .mod-2 .l-item,
  .mod-3 .l-item {
    border: 3px solid #111;
  }
  
  .mod-1 .r::after {
    content: "Mod 1";
    color: red;
    font-weight: bold;
  }
  
  .mod-2 .r::after {
    content: "Mod 2";
    color: green;
    font-weight: bold;
  }
  
  .mod-3 .r::after {
    content: "Mod 3";
    color: blue;
    font-weight: bold;
  }
  
  ul {
    list-style: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;ul class="tab-list display-tab"&gt;
    &lt;li class="mod-1 on"&gt;Mod 1&lt;/li&gt;
    &lt;li class="mod-2"&gt;Mod 2&lt;/li&gt;
    &lt;li class="mod-3"&gt;Mod 3&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="vd-list mod-1"&gt;
    &lt;li&gt;
      &lt;div class="l"&gt;&lt;/div&gt;
      &lt;div class="r"&gt;
        &lt;div class="v-desc"&gt;desc&lt;/div&gt;
        &lt;div class="v-info"&gt;
          &lt;span class="v-info-i"&gt;1&lt;/span&gt;
          &lt;span class="v-info-i"&gt;2&lt;/span&gt;
          &lt;span class="v-info-i"&gt;3&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="v-date"&gt;date&lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>