title: Jquery click event on div
body: <p>I have this code:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  .kat1 {
      background-image:url(ikoniceKategorije/07.jpg);
      width:30px;
      height:30px;
      float:left;
      }
  .kat1:hover {
      background-image:url(ikoniceKategorije/07h.jpg);
      }
  
  // here I have a code for .kat2,kat2 ... styles
  #div {
      width:220px;
      height:30px;
      overflow:hidden;
      }
  
  &lt;/style&gt;
  &lt;script&gt;
  $(function() {
    $('#div div').click(function() {
      var elem = $(this);
      var style = elem.css('background-image');
      if(/h\.jpg/.test(style)) {
        elem.css('background-image', style.replace(/h\.jpg/, '.jpg'));
      } else {
        elem.css('background-image', style.replace(/\.jpg/, 'h.jpg'));
      }
    });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="div"&gt;
          &lt;div class="kat1 changing"&gt;&lt;/div&gt; 
          &lt;div class="kat2 changing"&gt;&lt;/div&gt;
          &lt;div class="kat3 changing"&gt;&lt;/div&gt;
          &lt;div class="kat4 changing"&gt;&lt;/div&gt;
          &lt;div class="kat5 changing"&gt;&lt;/div&gt;
          &lt;div class="kat6 changing"&gt;&lt;/div&gt;
          &lt;div class="kat7 changing"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have a problem - when I click once div change bacground color but when I click second time on same icon then I cant change div background...</p>
  
  <p>demo www.pluspon.com/kategorije.html</p>