jquery parar refresh da pagina

[br]

boas

estou a desenvolver uma app

adiciono em com um botao um no campo no form, mas sempre que carrego nesse botao ele faz-me refresh da pagina.

como posso para isso?

$(document).ready(function(){
        $("#btadd").click(function(){
            $("ol").append("<li>Date <input type='text' id=datepicker' /> Hour <input type='text'/></li>");
        });
        });

Edited April 26, 2013 at 09:46 AM by brunoais
geshi

[HappyHippyHippo]

se faz refresh da página é porque o elemento com o id "btadd" será um anchor com o href com o valor de "#" ou um input do tipo "submit" de um form com o atributo action com o valor de "#".

tanto um caso como outro, a solução é fazer o retorno de false da função descrita

Edited April 26, 2013 at 07:50 AM by HappyHippyHippo

[br]

muito obrigado.

exacto o return false resolveu.

$(document).ready(function(){
	 $("#btadd").click(function(){
		 $("ol").append("<table>\n\
		 <tr><td><label>Date</label><input type='text' id='datepicker' class='text ui-widget-content ui-corner-all'/></td>\n\
		 <td><label>Hour</label><input type='text' class='text ui-widget-content ui-corner-all'/></td>\n\
		 <td><button id='btremove' class='ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only'><img src='ico/delete.png'></button></td></tr>\n\
		 </table>");
					 return false;
	 });		
	 });

mas agora datepicker nao funciona nos novos. como posso resolver?

Edited April 26, 2013 at 03:35 PM by yoda

[HappyHippyHippo]

não funciona nos "novos" (e não nos outros) porque não os inicializaste após a sua criação ...

[br]

so apenas do primeiro ja foi criado no form, nos novos nao funciona.

como assim inicializar apos a criaçao?

desculpa mas sou muito verde em jquery, é a primeira vez que estou a olhar para isto

[HappyHippyHippo]

pensa assim : como e quando é que inicializas o datepicker ?

Edited April 26, 2013 at 08:39 AM by HappyHippyHippo

[br]

acrescentei uma funçao com datepicker no inicio.

$(document).ready(function(){
$("#btadd").click(function(){
$("ol").append("<table>\n\\n\
<tr><td><label>Date</label><input type='text' id='datepicker' class='text ui-widget-content ui-corner-all'/></td>\n\
<td><label>Hour</label><input type='text' class='text ui-widget-content ui-corner-all'/></td>\n\
<td><button id='btremove' class='ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only'><img src='ico/delete.png'></button></td></tr>\n\
</table>");
return false;
});

$("#btremove").click(function(){
$('#btremove').closest('ol').remove();
return false;
});
});

$(function() {
$( "#datepicker" ).datepicker();
});

nao e assim a maneira correcta?

e mesmo o remover tambem nao funciona, mas funciona no primeiro criado fora desta funçao

Edited April 26, 2013 at 03:35 PM by yoda

[HappyHippyHippo]

1º - id's são para ser únicos !!!

2º - o que estás a fazer na inicialização é associar a plugin datepicker ao elemento com o id datepicker (se tiveres mais do que um o resultado é impossivel determinar)

3º - não o estás a fazer o processo anterior ao elemento criado na acção click

[br]

sim estou a entender o que estas a dizer.

entao vou ter que criar um novo id para cada datepicker? e o mesmo para o click do remover

como posso fazer isso?

[HappyHippyHippo]

de várias maneiras ...

mas a mais simples pode ser usar uma variável global com o id a ser atribuido

[KTachyon]

Antes de mais, um pouco offtopic: A fazeres append de strings de código HTML o teu código vai ficar uma salganhada enorme. A minha sugestão é colocares esse código em ficheiros HTML separados. Se utilizares bibliotecas como o underscore e o backbone ficas com o código bastante mais limpo e fácil de manter.

Relativamente à questão colocada, basta utilizar o preventDefault().

Edited April 26, 2013 at 12:34 PM by KTachyon