title: Click Event inside of a jQuery Plugin on another element doesn't work
body: <p>I found many articles about this topic on stackoverflow but no one gave me a solution on my exact problem.</p>
  
  <p>I have a jQuery Plugin which works fine so far. In that plugin I add some new <code>DIVs</code>. Also I want to add a click event listener on these new <code>DIVs</code>. Like this:</p>
  
  <pre><code>(function ($) {
    $.fn.myFunc = function(options) {
  
      // Options + Defaults
      var settings = $.extend({
        // Some options in here
      }, options);
  
      var controls = "\
        &lt;div class='controls'&gt;\
          &lt;button class='btn-add-text'&gt;Add Text&lt;/button&gt;\
        &lt;/div&gt;\
      ";
  
      $('.btn-add-text').click(function() {
        alert("Test");
      });
  
      $(this).after(controls);
  
      return this;
    };
  })(jQuery);
  </code></pre>
  
  <p>My first thought was, that it is not possible because the event listener was called before the new div is actually inside of the DOM, so it can't work. So I moved the .click(func... Block outside of the plugin code and put it inside of a document.ready function like so:</p>
  
  <pre><code>$(document).ready(function() {
    $('.btn-add-text').click(function() {
      alert("Test");
    });
  });
  </code></pre>
  
  <p>This also won't work for me. Is there any solution for this problem?</p>