title: Change CSS of dynamically created elements via jQuery
body: <p>I'm trying to change the color of the <code>h3</code> within my div <code>.card</code> that was dynamically created, however, when I reload the page, it sets its values to default.</p>
  
  <p>This is how I'm trying to change the color where <code>color</code> in parameter is the desired color to apply to the <code>h3</code>.</p>
  
  <p>On button click, I'm creating the card:</p>
  
  <pre><code>function createCard(id, title, ...) {
      // Creates a main card div
      var $cardDiv = $('&lt;div&gt;', {
          class: 'col-md-12 card',
          "card-id": id
      });
  
      // h3 tag with title of note
      var $title = $('&lt;h3&gt;', {
          "data-toggle": 'modal',
          "data-target": '#update',
          click: function() {
              updateModal(id, title, note);
          }
      }).text(title);
  
      // Append to card
      $cardDiv.append($title);
  }
  </code></pre>
  
  <p>After this, I'm calling the <code>cardScheme</code> method:</p>
  
  <pre><code>cardScheme('#29ABDA');
  
  function cardScheme(color) {
      $('.card h3').css('color', color);
  }
  </code></pre>
  
  <p>I realized that JavaScript/jQuery are unable to find the <code>.card</code> class since those cards were created dynamically.</p>
  
  <pre><code>var cards = document.getElementsByClassName('card');
  for (var i in cards) {
      console.log('cards', cards[i]);
  }
  // returned {cards, 0}
  </code></pre>
  
  <p>How can I change the color of the <code>h3</code>?</p>