Input creato dinamicamente non funziona

[carlo9987]

Ciao a tutti!

Ho una paginetta che estrae alcuni dati da un database. Da questa, dovrà essere possibile aggiungere informazioni, modificarle o eliminarle.

Questo è il codice php che estrae i dati presenti nel db:

echo "<tbody>";		
	$result = mysql_query($selectServiceOffered);
	if (!$result) {
		echo 'Could not run query: ' . mysql_error();
	}else{						
	        $i=0;
		while ($row = mysql_fetch_assoc($result)) {
		        $i++;
			echo "<tr id='soTableRow".$i."'>";
				echo "<td><select class='listBox' id='servicesSO' name='servicesSO[]' class='textbox'/></select></td>";
			        echo "<td><input type='text' id='ss_soPort' name='ss_soPort[]' class='textbox' value='".$row['portNumber']."'/></td>";
				echo "<td><input type='text' id='ss_soDescription' name='ss_soDescription[]' class='textbox' value='".$row['description']."'/></td>";
				echo "<td><input type='text' id='ss_soTime' name='ss_soTime[]' class='textbox' value='".$row['howLong']."'/></td>";
				echo "<td><input title='Delete' id='ss_serviceOfferedRemove' class='deleteSSP' value='".$i."'/></td>";
			echo "</tr>";
		}
	}
echo "</tbody>";	
echo "<tfoot>";
	echo "<tr>";
		echo "<td colspan='5' align='right'>"; 
			echo "<input title='Add' name='ss_serviceOfferedAdd' id='ss_serviceOfferedAdd' class='addSSP'/>";
		echo "</td>";	
	echo "</tr>";
echo "</tfoot>";

Questo è il codice javascript per inserire nuove informazioni, quindi per creare una nuova riga nella tabella con i vari input da compilare:

var newRow = $('#soTable >tbody >tr').length;
$("#ss_serviceOfferedAdd").click(function () {
	newRow++;

	var newTextBoxDiv = $(document.createElement('tr')).attr("id", 'soTableRow' + newRow);

	newTextBoxDiv.after().html('<td><select class="listBox" id="servicesSO'+newRow+'" name="servicesSO[]" class="textbox"/></select></td><td><input type="text" id="ss_soPort" name="ss_soPort[]" class="textbox"/></td><td><input type="text" id="ss_soDescription" name="ss_soDescription[]" class="textbox"/></td><td><input type="text" id="ss_soTime" name="ss_soTime[]" class="textbox"/></td><td><input title="Delete" id="ss_serviceOfferedRemove" class="deleteSSP" value="'+newRow+'"/></td>');

	newTextBoxDiv.appendTo("#soTable");

	var selectOpt = "#servicesSO" + newRow;

	$(selectOpt).load("../../config/select/services.php");	
		
});

Mentre questo è quello che dovrebbe eliminare le informazioni:

$("input#ss_serviceOfferedRemove").click(function () {
	var deleted = $(this).val();
	alert (deleted);
	alert ( $('#soTable >tbody >tr').length );
	$("#soTableRow" + deleted).remove();
});

Questo è il risultato del codice:



Il problema è che la funzione $("input#ss_serviceOfferedRemove").click(function () funziona solo per gli elementi estratti dal codice php, mentre se creo una nuova riga e tento di eliminarla, non funziona.

Qualcuno può aiutarmi?

Vi ringrazio in anticipo!

Carlo

 

[criric]

Ciao, non si puo assegnare lo stesso id a piu elementi , dal ciclo che fai assegni a tutti i "Delete" l'id="ss_serviceOfferedRemove"
non potra mai funzionare devi differenzarli id="ss_serviceOfferedRemove1" id="ss_serviceOfferedRemove2" etc