Some jquery code is not working with appending of table rows

[mmdionisio23]

Hi,

 

what I'm tryng is to append a table row with associated jquery code...

 

I have a jquery code just like this

<script type="text/javascript">
jQuery(function($) {

  var rowCtr = 0;
  $('.addRow').click(function(){
		$('#tableID > tbody:last').append('<tr name="rowEq['+rowCtr+']" id="rowEq['+rowCtr+']"><td>'+
				'<select id="stype'+rowCtr+'" name="rowData['+rowCtr+'][equipment_type]">'+
					'<option value="0"> -- </option>'+
					'<option value="1"> Type 1 </option>'+
					'<option value="2"> Type 2 </option>'+
					'<option value="3"> Other </option>'+
				'</select>'+
				'<input id="other_type'+rowCtr+'" type="text" name="rowData['+rowCtr+'][other_type]">'+
				);
				
				$('#stype'+rowCtr).change(function() {
			
				if(jQuery('#stype'+rowCtr).val() == '3')
				{
					jQuery('#other_type'+rowCtr).show();
				}else{
					jQuery('#other_type'+rowCtr).hide();
				}
				});
				
				if(jQuery( '#stype'+rowCtr ).val() != '3')
				{
					jQuery('#other_type'+rowCtr).hide();
				}
				rowCtr++;
   });

});

				

</script>

And html like this..

<input type='button' class='addRow' value="Add Row">
<form>
    <table id="tableId">
       <thead>
           <tr>
               <th> Type </th>
           </tr>
       </thead>
        <tbody>
            <tr>
                <td>
                  dummy text..  
                </td>
            </tr>
        </tbody>
    </table>
</form>

The appending is ok but the hidding/showing of "other_type" field is not working. It always hide "other_type" field even if I already selected the 'other' option.

 

[mik_se7]

Have you tried putting an alert in the if statement that is equal to 3 to see if the if statement is being actioned?

[mmdionisio23]

Hi, Problem solved

 

I did something like this..

jQuery('.stype').change(function() {
			
					if(jQuery(this).val() == '3')
					{
						jQuery(this).next().show();
		
					}else{
						jQuery(this).next().hide();
					}
				});
				//hide on load
				if(jQuery( '.stype' ).val() != '3')
				{
					jQuery('.other_type').hide();
				}

Thanks

Edited November 21, 2014 by mmdionisio23