title: Values inputed in modal does not fire on change event in document js
body: <p>I have a modal that is inside a td tag.</p>
  
  <p>Once the user has selected the desired colours and closed the modal, it should effect the pricing.</p>
  
  <p>The pricing is effected by the number of colours you select. </p>
  
  <p>If you open the modal and select, for example, 2 colours and close it. It does not fire the on change event.</p>
  
  <p>To trigger the event you have to change either the width or drop input again. </p>
  
  <p>I'm not sure how to trigger the change.</p>
  
  <p>Please help! </p>
  
  <p>Here is what I have:</p>
  
  <p>Html: </p>
  
  <pre><code>&lt;tr&gt;
  
    &lt;td&gt;
      &lt;input type="text" name="width[]" class="width"&gt;
    &lt;/td&gt;
  
    &lt;td&gt;
      &lt;input type="text" name="drop[]" class="drop"&gt;
    &lt;/td&gt;
  
    &lt;!-- Button trigger modal --&gt;
    &lt;td&gt;
      &lt;button type="button" class="features btn btn- 
     primary" data-toggle="modal" data- target=".featuresModal"&gt;Features
      &lt;/button&gt;
  
      &lt;!--modal --&gt;
      &lt;div class="featuresModal modal fade" tabindex="-1" role="dialog" aria- labelledby="featuresModalLabel" aria-hidden="true"&gt;
  
        &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content text-center"&gt;
            &lt;div class="modal-body"&gt;
              &lt;div class="text-centre"&gt;
                &lt;select data-placeholder="Colours" class="colours 
     chosen-select" multiple tabindex="4" name="colours[]"&gt;" +
                  &lt;option value=\ "\"&gt;&lt;/option&gt;
                  getMultiColours() +
                &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="trigger btn btn- 
     secondary" data-dismiss="modal"&gt;Save and Close
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>js: </p>
  
  <pre><code>$(document).on('change', '.colours, .width, .drop', function () {
      var width = $(".width", $(this).parent().parent()).val();
      var drop = $(".drop", $(this).parent().parent()).val();
      var sub_total = $(".total",$(this).parent().parent());
      var colours = $(".colours",$(this).parent().parent()).val();
      var colour_count = colours.length;
  
      $.ajax({
          url: "#",
          method: "POST",
          data: {
              "product": product,
              "width": width,
              "drop": drop
          },
          success: function (data) {
              data = parseInt(data);
  
              if (data === "") {
                  parent = sub_total.val(0);
              }
              else {
                  var price = 0;
                  if (colour_count &lt;= 1) {
                      parent =
                          sub_total.val(data);
                  }
                  else if (colour_count &lt;= 2) {
                      data = data + (data * 0.15);
                      parent =
                          sub_total.val(data);
                  }
                  else {
                      data = data + (data * 0.15);
                      for (i = 2; i &lt;
                          colour_count; i++) {
                          data += (data * 0.10);
                      }
                      parent = sub_total.val(data);
                  }
              }
              calculate(parent)
          }
      });
  });
  </code></pre>