Montar HTML fora do jQuery

Programação
, ,
#1

Estou com dificuldade em montar o HTML fora do jQuery.

$(document).ready(function() {
	$.ajax({
		url : "listAllForum",
		dataType : 'json',
		success : function(data) {
			$.each(data, function(index, objeto) {
				$('#post-forum').last().append('<div class="jumbotron">' +
						' <strong>Nome do usuário que postou a mensagem!!!</strong> - '+
						' Data: <br>' + 
						' <input type="hidden" id="idForum" value="'+ objeto.idForum +'" />' + 
						  objeto.message + '<br> <br>' + 
						' <input type="text" size="90" placeholder="Redigir uma resposta" id="answerTXT" /> <br> <br>' + 
						' <a href="javascript:answer()" id="answer" >Responder</a></div>');
				});
		}
	});

Tentei assim, mas não funcionou

$(document).ready(function() {
$.ajax({
	type:'post',		//Definimos o método HTTP usado
	dataType: 'json',	//Definimos o tipo de retorno
	url: 'listAllForum',//Definindo o arquivo onde serão buscados os dados
	success: function(dados){
		for(var i = 0; dados.length > i; i++){
			//Adicionando registros retornados na div
			$('#post-forum').last().append('<a href="#" id="answer">Responder</a><br>');
		}
	}

});

$('#answer').on('click', function(event) {
    adicionaItem(1);
    event.preventDefault();
});
});
1 curtida
#2

Debuga e informe exatamente em que linha o problema acontece.

Mostra tambem o HTML e a mensagem de erro em caso de exception.

1 curtida
#3

é exatamente isso, se eu colocar um alert dentro da function adicionaItem(), não dá erro, não imprime, não acontece nada…
Criei a function adicionaItem(1), adicionaItem(), mas não executa nada, não dá erro, nem chama a function …

1 curtida
#4

E cade o HTML que contem o id “answer”? Cadê a implementação da function adicionaItem? Salva o código HTML/JS completo aqui: https://jsfiddle.net/ e poste o link pra ajudar quem vai te ajudar, pois não dá pra adivinhar.

1 curtida
#5

Não vai funcionar porque no carregamento da página, esse trecho…

$('#answer').on('click', function(event) {
    adicionaItem(1);
    event.preventDefault();
});

Já está definido e os links com id=“answer” (o que é um erro aqui e explico adiante) nem foram criados, por isso o evento do click não funciona…

O erro do id é que apenas um único elemento pode usa-lo, outros links terão de ter seu proprio id, assim você evita conflitos…

Voce pode adicionar a função adicionaItem para cada link criado dinamicamente dessa forma…

var postForum = $('#post-forum');

for(var i = 0; i < dados.length; i++) {
    //Adicionando registros retornados na div
    var novoLink = document.createElement('a');
        novoLink.id = "answer_" + i; // answer_0, answer_1...
        novoLink.href = "#";
        novoLink.innerHTML = "Responder";
        novoLink.onclick = adicionaItem; // assim mesmo, sem aspas ()

    postForum.append(novoLink); // .last() desnecessário aqui...
}

A idéia é essa, posso ter errado algum coisa, faz tempo que não programo js,

1 curtida
#6

Estou atrás de um material que fale sobre desacoplamento de camadas HTML, jQuery e CSS.

#7

Na medida do possível prefira deixar seu código HTML no HTML, nem que em determinado momento um trecho não deva aparecer para o usuário. Daí você manipula o que for necessário no js, pode ser com java script puro, com auxílio da excelente biblioteca jquery como você já usa, ou frameworks da moda como Angular por exemplo (não gosto dele, mas a geração atual adora).