title: Pagination with data-toggle manipulation html
body: <p>I have something like this</p>
  
  <pre><code>&lt;div class="container"&gt;
        &lt;h2&gt;Pagination - site&lt;/h2&gt;
        &lt;ul class="pagination"&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#tab1"&gt;1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#tab2"&gt;2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#tab3"&gt;3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;div id="tabcont" class="tab-content"&gt;
     &lt;div id="tab1" class="tab-pane"&gt;name1&lt;/div&gt;
     &lt;div id="tab2" class="tab-pane"&gt;name2&lt;/div&gt;
     &lt;div id="tab3" class="tab-pane"&gt;name3&lt;/div&gt;
     &lt;div id="tab4" class="tab-pane"&gt;name4&lt;/div&gt;
     &lt;div id="tab5" class="tab-pane"&gt;name5&lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
    var i = null;
    $('a').click(function(){
      console.log(i);
      console.log($(this).text());
      if($(this).text() &gt;= 3){
        if(i &lt; 3 || i === null){
          $('.pagination').html('&lt;li&gt;&lt;a data-toggle="tab" href="#tab2"&gt;2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-toggle="tab" href="#tab3"&gt;3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-toggle="tab" href="#tab4"&gt;4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-toggle="tab" href="#tab5"&gt;5&lt;/a&gt;&lt;/li&gt;');
          }
          i = $(this.text);
  
        }else{
          if(i &gt;= 3 || i === null){
          $('.pagination').html('&lt;li&gt;&lt;a data-toggle="tab" href="#tab1"&gt;1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-toggle="tab" href="#tab2"&gt;2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-toggle="tab" href="#tab3"&gt;3&lt;/a&gt;&lt;/li&gt;');
     }i = $(this.text); }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>for the first time code worked fine and pagination but next time click function not work and i don't know why?</p>