jQuery Forum

I have a simple test form with three fields.  Two required, one not required, and one minimum length.  I am using jquery validation unobtrusive with Bootstrap 4.  The first field validates fine but the last field in the form is not validated at all and I am able to reach the submit handler with an invalid form.  Please help.

I have a table that loads just fine.  Each row has an ID matching the database.  The last row in the table is there to insert a new row.  When the user clicks the Add button the data is added to the database and the row is displayed in the table.  Each row in the table contains a button for deleting that row.  Here is the button markup:

1. <button class="btn btn-default delete-increment" aria-label="Delete" data-id="1">
2. <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
3. <span class="sr-only">Delete</span>
4. </button>

There is a jQuery function which detects a click of this button by the class name delete-increment.  It then deletes the item from the database and the table.  The delete buttons work fine when the table is initially populated.  However, when a new row is added and you click the delete button for that row it does not trigger the function.  I did confirm that after adding a new row all the other delete buttons still work.  The issue appear to be with just new rows added after the page load.

1. $('[class~=delete-increment').click(function () {
2. ...
3. });

Here is the code used to insert the new row:

1. $('#my-table tr:last').prev().after('<tr id="LayoutContent_increment-' + data.d + '"><td>$' + Start + '</td><td>$' + End + '</td><td>$' + Increment + '</td><td class="action" style="text-align: center"><button class="btn btn-default delete-increment" aria-label="Delete" data-id="' + data.d + '"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span><span class="sr-only">Delete</span></button></td></tr>');

Anyone know why only the new rows added do not trigger the click function?

With the following code I need to locate all elements with a cell_name that starts with the word Driver.  Once I identify these rows I need to select the data_table element within the same row and change the css class.  Any help with a fast and efficient query.

1. <table>
    <tbody>
     <tr class="row_folder">
      <td class="matrix_cell">
       <div>
        <div class="cell_name">Driver #1</div>
       </div>
      </td>
      <td class="matrix_line">
       <div>
        <table class="data_table folder">
         ...
        </table>
       </div>
      </td>
     </tr>
     ...
    </tbody>
   </table>
   

When attaching the uncompressed jquery-2.1.1.js file to the YUI Compressor .NET MSBuild task produces the following errors in the output window: