Call Jquery function in HTML created via Javascript

Question

My main.js and my html.

$(function()
{
	/*var ipControlador;
	$(function carregaFlows()
	{
	$.getScript("indexFunction.js", function()
	{
		ipControlador = ip;
		alert(ipControlador);
	});
	});*/
	
	$("#in_port").change(function()
	{
		$.ajax(
		{
			method: "GET",
			url: "http://192.168.0.199:8085/wm/core/switch/all/port/json",
			success: function(data)
			{
				var options = '<option value="#">Porta de saída</option> <option value="output=flood">output=flood</option>';
				$.each(data, function(key, val)
				{
					if(key == ($("#switch").val()))
					{
									var i = 0;
									while ( parseInt(val.port[i].portNumber) )
									{
										if($("#in_port").val() != val.port[i].portNumber)
										{
											options += '<option value="output='+val.port[i].portNumber+'">output'+val.port[i].portNumber+'</option>';
										}
										i++;
								}
					}
				});
				$("#actions").html(options);
			},
			error: function(data)
			{
				alert("Deu erro bicho : "+result.status);
			}
		});
	});
	
	$("#switch").change(function()
	{
		$.ajax(
		{
			method: "GET",
			url: "http://192.168.0.199:8085/wm/core/switch/all/port/json",
			success: function(data)
			{
				var options = '<option value="#">Porta de entrada</option>';
				$.each(data, function(key, val)
				{
						if(key == ($("#switch").val()))
						{
							var i = 0;
							while ( parseInt(val.port[i].portNumber) )
							{
									options += '<option value="'+val.port[i].portNumber+'">'+val.port[i].portNumber+'</option>';
									i++;
							}
						}
				});
				$("#in_port").html(options);
			},
			error: function(data)
			{
				alert("Deu erro bicho : "+result.status);
			}
		});
	});

	$(function carregaFlows()
	{
		$.ajax(
		{
			method: "GET",
			async: false,
			url: "http://192.168.0.199:8085/wm/core/switch/all/aggregate/json",
			success: function(dados)
			{
				var qtdFolws;
				$.each(dados, function(chave, valor)
				{
					qtdFlows = valor.aggregate.flowCount;
				});
			},
			error: function(dados)
			{
				alert("Deu erro bicho : "+result.status);
			}
		});

		$.ajax(
		{
			method: "GET",
			url: "http://192.168.0.199:8085/wm/staticflowpusher/list/all/json",
			success: function(data)
			{
				var linhas = '<tr><th>Switch</th><th>Nome</th><th>Cookie</th><th>Prioridade</th><th>Porta de entrada</th><th>Porta de saída</th>';
				var cont = 0;
				var nome;
				$.each(data, function(key, val)
				{
					for(var i = 0; i < qtdFlows; i++)
					{								
						for(index in val[i])
						{ 											
							if(eval('val[i].'+index+'.match.in_port') != 'controller')
							{
									nome = index;
									linhas += '<tr><td>'+key+'</td><td>'+index+'</td><td>'+eval('val[i].'+index+'.cookie')+'</td><td>'+eval('val[i].'+index+'.priority')+'</td><td>'+eval('val[i].'+index+'.match.in_port')+'</td><td>'+eval('val[i].'+index+'.actions.output')+'</td><td><a href="#" class="excluir" id="'+index+'">Excluir</a></td></tr>';							
							}
						}
						cont++;
					}
				});
				$("#tabelaRotas").html(linhas);
			},
			error: function(data)
			{
				alert("Deu erro bicho : "+result.status);
			}
		});
	});
	
	
	$(function carregaDados()
	{
		$.ajax(
		{
			method: "GET",
			url: "http://192.168.0.199:8085/wm/core/controller/switches/json",
			success: function(data)
			{
				var options = '<option value="#">Switchs</option>';
				$.each(data, function(key, val)
				{
					options += '<option value="'+val.switchDPID+'">'+val.switchDPID+'</option>';
				});
				$("#switch").html(options);
			},
			error: function(data)
			{
				alert("Deu erro bicho : "+result.status);
			}
		});
	});

	$("#rota").on("submit", function(event)
	{
		var form = (
			"{ " +
					'"switch": "' + $("#switch").val() +
					'", "name": "' + $("#name").val() +
					'", "cookie": "' + $("#cookie").val() +
					'", "priority": "' + $("#priority").val() +
					'", "in_port": "' + $("#in_port").val() +
					'", "active": "' + $("#active").val() +
					'", "actions": "' + $("#actions").val() +
			'" }');
		$.ajax(
		{
			method: "POST",
			url: "http://192.168.0.199:8085/wm/staticflowpusher/json",
			data: form,
			dataType: "json",
			success: function(data)
			{
				alert(data.status);
			},
			error: function(data)
			{
				alert("Deu erro : "+data.status);
			}
		});
		event.preventDefault();
	});
	$(".excluir").click(function()
	{
		var nome = this.id;
		alert(nome);
		/*var jsonExclui = ("{" + '"name": "'+nome+'" }');
		alert(jsonExclui);
		$.ajax(
		{
			method: "DELETE",
			//type: 'delete',
			url: "http://192.168.0.199:8085/wm/staticflowpusher/json",
			data: jsonExclui,
			dataType: "json",
			success: function(data)
			{
				alert(data.status);
			},
			error: function(data)
			{
				alert("Deu erro : "+data.status);
			}
		});*/	
	});
});

<hmtl>
	<head>
		<meta charset="UTF-8">
		<title>Controlador</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
	</head>
	<body>
		<a href="adicionaRotas.html">Adicionar Rota</a>
		<a href="gerenciaRotas.html">Gerenciar Rotas</a>
		<fieldset>
			<legend>Gerenciar Rotas:</legend>
				<table border="0" id="tabelaRotas">
				</table>
		</fieldset>
		<form method="GET" action="http://192.168.0.199:8085/wm/staticflowpusher/clear/all/json">
			<input type="submit" value="Apagar Flows de todos os switchs">
		</form>
	</body>
</hmtl>

It is an extension (Chrome). The problem I face occurs when I hit the link that is created dynamically: <td><a href="#" class="excluir" id="'+index+'">Excluir</a></td>. The link is not calling the last function of main.js. What should I do?

Answer 1

For dynamically created elements, the click does not work. To work, you must use the method on:

$('#tabelaRotas').on('click', '.excluir', function() {
     var nome = this.id;
     alert(nome);
});