title: onclick function doesn't work in an Ajax loaded button
body: <p>So, I have a website which after selecting day loads some forms with Ajax request. In this loaded website (I just add its content to a modal), I have a button </p>
  
  <pre><code>&lt;button class="btn btn-success" type="button" onclick="addInput()" name="add"&gt;
     Dodaj kolejny przedział.
  &lt;/button&gt;
  </code></pre>
  
  <p>Which should call the function addInput(), which is defined in the "master" html file</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
  
  fields = 0;
  function addInput() {
    alert("dodajemy");
     if (fields != 24) {
    document.getElementById('text').innerHTML += "test&lt;br&gt;";
    // document.getElementById('text').innerHTML += "Poczatek: &lt;input type='text' value='' /&gt;Koniec: &lt;input type='text' value='' /&gt;&lt;br /&gt;";
    fields += 1;
  } else {
    document.getElementById('text').innerHTML += "No wiecej ci nie potrzeba&lt;br&gt;";
  }
  
  };  
  
  $.ajaxSetup({ cache: false, type: 'POST',
  headers: { "cache-control": "no-cache" } });
  
  $("#wybierz_pokoj").submit(function() {
  
      var url = "/testowa/wybierz_pokoj" // the script where you handle the form input.
      document.getElementById("modal").innerHTML = "Czekamy"
      $.ajax({
             type: "POST",
             url: url,
             evalJS: true,
             data: $("#wybierz_pokoj").serialize(), // serializes the form's elements.
             cache: false,
             success: function(data)
             {
                document.getElementById("modal").innerHTML = data;
             }
           });
  
      return false; // avoid to execute the actual submit of the form.
  });
  }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>And after clicking the button, I'm getting "Uncaught ReferenceError: addInput is not defined" error.</p>
  
  <p>What am I doing wrong?</p>