event change without effect when triggered by a select field dynamically added to the page using Jquery

Asked

Viewed 70 times

1

Can someone help me with this problem ?

Steps to generate the failure:

  1. click add

  2. change field value from 2° line to load field, also from 2° line

  3. the flaw

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Untitled Document</title>
<!--<script type="text/javascript" src="./util/js/jquery-1.5.1.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
<br />
<br />
<br />
<form id="form1" name="form1" method="post" action="">
  <br />
<table width="256" border="1" cellspacing="0" cellpadding="0" align="center" id="table_exemplo">
 <tbody>
  <tr>
    <td height="30" align="center">Coluna A</td>
    <td align="center">Coluna B</td>
  </tr>
  <tr class="line">
    <td width="128" height="30" align="center">
     <select name="campoA1" id="campoA1" class="classeA" data-id="1">
      <option value="0">Fulano</option>
      <option value="1">Sicrano</option>
      <option value="2">Deltrano</option>
    </select></td>
    <td width="128" align="center">
    <select name="campoB1" id="campoB1" class="classeB">
    </select></td>
  </tr>
  </tbody>
  
  <tfoot>
  <tr>
    <td height="30" align="center">&nbsp;</td>
    <td align="center"><input type="button" name="btn_add" id="btn_add" value="Adicionar" /></td>
  </tr>
  </tfoot>
</table>
</form>
<script>

var num = 1;

$("#btn_add").click(function()	
{	
   var html ="";
   num = num + 1;
   html += ' <td width="128" height="30" align="center">';
   html += '  <select name="campoA'+num+'" id="campoA'+num+'" class="classeA" data-id="'+num+'">';
   html += '    <option value="0">Fulano</option>';
   html += '    <option value="1">Sicrano</option>';
   html += '    <option value="2">Deltrano</option>';
   html += ' </select></td>';
   html += ' <td width="128" align="center">';
   html += '   <select name="campoB'+num+'" id="campoB'+num+'" class="classeB"></select>';
   html += ' </td>';

   var newRow = $("<tr class='line'>");
   newRow.append(html);  
   $("#table_exemplo").append(newRow);
});


$(".classeA").change(function()	
{	 
    var n = $(this).attr('data-id');	
    var html ="";
	html += '    <option value="0">Fusca</option>';
    html += '    <option value="1">Brasilia</option>';
    html += '    <option value="2">Gol</option>';
	$("#campoB"+n).append(html);	
});


</script>
</body>
</html>

javascript html jquery
  • 1

    Change $(".classeA").change(function() for $(document).on("change", ".classeA", function()

  • Thanks brother, thank you so much !!!! it worked right here, now I’ll be able to do what I need.

No answers

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.