title: jquery .on('click') toggle css of this li element + call function same time
body: <p>I have a number of lists, and want to toggle the css (background) of <em>this</em> li element when this is clicked launching a popup, the popup is working but cant get the on/off toggle to work which changes the background color of the item clicked. </p>
  
  <p>here is the code below// its at the bottom the main part of the question- if any one can let me know how the above could be acheived that would be great + much appreciated </p>
  
  <pre><code>function displayChannels() {
      $.each(channel_list, function (index, channel) {
          //Make the code for the channel
          var code_channel = "&lt;li&gt;&lt;img src='" + channel._icon + "'/&gt;&lt;/li&gt;";
          //Display it
          $("#channel-list").append(code_channel);
          //Open a list for the channel's program list
          var code_prog_list = "&lt;ul class='channel_row'&gt;";
          //Add each program in it as a li each time
          $.each(channel._programs, function (index, programme) {
              code_prog_list += "&lt;li&gt;&lt;div class='text-left'&gt;" + "&lt;h5&gt;" + programme._hour + ":" + programme._minutes + "&lt;/h5&gt;" + "&lt;h6&gt;" + programme._title + "&lt;/h6&gt;" + "&lt;p&gt;" + programme._cat + " (" + programme._duree + "mn)" + "&lt;/p&gt;&lt;/div&gt;" + "&lt;div class='programme_icon'&gt;&lt;img src='" + programme._icon + "'' alt=''/&gt;&lt;/div&gt;" + "&lt;div class='desc'&gt;" + programme._desc + "&lt;/div&gt;" + "&lt;div class='star'&gt;" + programme._star + "&lt;/div&gt;";
              code_prog_list += "&lt;/li&gt;";
              //$(this).children().width(programme._width);
              //$(this).css( "width", programme._width + 'px');
              //$( "#channel_row li").width(programme_width);
              //$(this).children('.channel_row li').width(programme._width);
          });
          //Close the list
          code_prog_list += "&lt;/ul&gt;";
          //Display it
          $("#prog-grid").append(code_prog_list);
          $("#prog-grid ul").last().resizePrograms();
      });
      $("#loader").hide();
      scrollTime();
      $(".channel_row li").on("click", showPopup);
      $("#popup").on("click", function () {
          $("#popup").toggle(500);
      });
  }
  function showPopup() {
      var x = "&lt;div id='close_button'&gt;&lt;/div&gt;";
      $("#popup").html(x).show(500);
      $(this).children().css("background", "red");
  }
  </code></pre>