Tom Tom - 2 months ago 6
Javascript Question

jQuery simultaneous addClass and removeClass

I have a link to my code in Fiddle.

HTML :

<table border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_1" id="event_type_1" tabindex="24" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_1" type="text" id="event_names_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="24">
</td>
<td class="padding-right-5">
<input name="school_1" type="text" id="school_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="25" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_1" type="tel" id="event_time_score_1" class="form-control responsive-placeholder text-center" tabindex="26" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
<tr style="display: none;">
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_2" id="event_type_2" tabindex="27" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_2" type="text" id="event_names_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="27">
</td>
<td class="padding-right-5">
<input name="school_2" type="text" id="school_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="28" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_2" type="tel" id="event_time_score_2" class="form-control responsive-placeholder text-center" tabindex="29" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
<tr style="display: none;">
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_3" id="event_type_3" tabindex="30" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_3" type="text" id="event_names_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="30">
</td>
<td class="padding-right-5">
<input name="school_3" type="text" id="school_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="31" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_3" type="tel" id="event_time_score_3" class="form-control responsive-placeholder text-center" tabindex="32" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
<tr style="display: none;">
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_4" id="event_type_4" tabindex="33" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_4" type="text" id="event_names_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="33">
</td>
<td class="padding-right-5">
<input name="school_4" type="text" id="school_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="34" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_4" type="tel" id="event_time_score_4" class="form-control responsive-placeholder text-center" tabindex="35" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
<tr style="display: none;">
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_5" id="event_type_5" tabindex="36" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_5" type="text" id="event_names_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="36">
</td>
<td class="padding-right-5">
<input name="school_5" type="text" id="school_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="37" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_5" type="tel" id="event_time_score_5" class="form-control responsive-placeholder text-center" tabindex="38" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
<tr style="display: none;">
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_6" id="event_type_6" tabindex="39" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_6" type="text" id="event_names_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="39">
</td>
<td class="padding-right-5">
<input name="school_6" type="text" id="school_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="40" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_6" type="tel" id="event_time_score_6" class="form-control responsive-placeholder text-center" tabindex="41" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
</tbody>
</table>


JS :

$(function() {
$('table').on('click', '.hide-row', function(e) {
console.log('hidden!');
$( this ).parent().parent().hide();
});


$('.add-row').click(function(e) {
$( this ).html('Hide').removeClass('add-row').addClass('hide-row');
$( this ).parent().parent().next().show();
});


});


What I want to do is when the user clicks 'add row' that another row is shown. The button the user clicks then turns into a button to remove the row that it's in at the same time.

What's happening is that it shows the new row and hides the row that they clicked on immediately. Anyone know what I'm doing wrong?

Thanks in advance!

Answer

The problem come from click event, to attach event to new elements as .add-row (added dynamically) you have to use event delegation on() :

$('body').on('click', '.add-row', function(e) {

Hope this helps.

$(function() {
  $('table').on('click', '.hide-row', function(e) {
    console.log('hidden!');
    $( this ).parent().parent().hide();
  });


  $('body').on('click', '.add-row', function(e) {
    $( this ).html('Hide').removeClass('add-row').addClass('hide-row');
    $( this ).parent().parent().next().show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="1" cellspacing="0">
  <tbody>
    <tr>
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_1" id="event_type_1" tabindex="24" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_1" type="text" id="event_names_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="24">
      </td>
      <td class="padding-right-5">
        <input name="school_1" type="text" id="school_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="25" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_1" type="tel" id="event_time_score_1" class="form-control responsive-placeholder text-center" tabindex="26" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_2" id="event_type_2" tabindex="27" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_2" type="text" id="event_names_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="27">
      </td>
      <td class="padding-right-5">
        <input name="school_2" type="text" id="school_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="28" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_2" type="tel" id="event_time_score_2" class="form-control responsive-placeholder text-center" tabindex="29" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_3" id="event_type_3" tabindex="30" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_3" type="text" id="event_names_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="30">
      </td>
      <td class="padding-right-5">
        <input name="school_3" type="text" id="school_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="31" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_3" type="tel" id="event_time_score_3" class="form-control responsive-placeholder text-center" tabindex="32" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_4" id="event_type_4" tabindex="33" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_4" type="text" id="event_names_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="33">
      </td>
      <td class="padding-right-5">
        <input name="school_4" type="text" id="school_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="34" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_4" type="tel" id="event_time_score_4" class="form-control responsive-placeholder text-center" tabindex="35" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_5" id="event_type_5" tabindex="36" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_5" type="text" id="event_names_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="36">
      </td>
      <td class="padding-right-5">
        <input name="school_5" type="text" id="school_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="37" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_5" type="tel" id="event_time_score_5" class="form-control responsive-placeholder text-center" tabindex="38" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_6" id="event_type_6" tabindex="39" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_6" type="text" id="event_names_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="39">
      </td>
      <td class="padding-right-5">
        <input name="school_6" type="text" id="school_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="40" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_6" type="tel" id="event_time_score_6" class="form-control responsive-placeholder text-center" tabindex="41" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
  </tbody>
</table>