1

Criei um elemento com JavaScript:

 $("<div />").addClass("placeholder").appendTo(element);

Mas não consigo dar atributos a ele, como posso fazer isso? Tentei o seguinte código, mas não funciona:

$(document).ready(function(){
     $(".placeholder").addClass("fg-red");
 });

Se eu crio ele com HTML funciona porém quando eu crio com JavaScript a tentativa de adicionar atributos não funciona

2
  • 2
    Isso aqui está errado addClass(".placeholder"). Não precisa do ponto antes para indicar que trata-se de uma classe, a função addClass serve exclusivamente para isto. Commented 21/02/2016 às 1:12
  • Desculpe não é o código verdadeiro digitei por celular e nas pressas saiu errado e não vi, desculpa Commented 21/02/2016 às 1:40

3 Respostas 3

2

No momento que anexa o novo objeto <div />, apenas adicione as classes que deseja:

Exemplo 1

obj = $("<div />"); 
obj.addClass("placeholder");
obj.addClass("fg-red");
obj.appendTo(element);

Exemplo 2

$("<div />").addClass("placeholder").addClass("fg-red").appendTo(element); 

Exemplo 3

$("<div />").addClass("placeholder fg-red").appendTo(element); 
5
  • Este exemplo não funciona, ele está dentro de uma função o que eu acredito que não tenha como usar variáveis de funções Commented 21/02/2016 às 18:16
  • Nesse caso vou marcar a pergunta como não clara o suficiente. E também não ficou claro o que quis dizer no comentário. ...está dentro de uma função o que eu acredito que não tenha como usar variáveis de funções Commented 22/02/2016 às 2:56
  • A sua resposta está de acordo com a minha pergunta, mas apenas gostaria de saber como posso fazer isso já que a criação do elemento está dentro de uma função no meu caso Commented 22/02/2016 às 5:56
  • coloque isso na sua pergunta. Alias, isso já se torna numa questão secundária. Abra outra pergunta específica. Commented 22/02/2016 às 6:26
1

Escrevi algo para você analisar, para manipular elementos criados dinamicamente utilize a função ON do Jquery (vide documentação)

<html>
    <head>

        <style>
            .verde {
                background:#0f0 !important;
            }

            #teste-area{
                background:#ccc;
                max-width:300px;
                min-height:100px;
            }

            .elemento {
                background:red;
                min-height:50px;
                margin: 5px;
            }
        </style>
        <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    </head>
    <body>
        <p>
            <a href="#" id="criar">Criar Elemento</a>
        </p>
        <p>
            <a href="#" id="add">Adicionar Atributo ao Elemento Dinamicamente</a>
        </p>

        <div id="teste-area"></div>

        <script>
            $(document).ready(function(){    
                $('#criar').click(function(e){
                    console.log("nojento");
                    $("<div><center>Elemento Adiciona</center></div>").addClass("elemento").appendTo($('#teste-area'));
                });

                $('body').on('click','#add', function(e){
                    $(".elemento").addClass("verde").empty().html("<center>Elemento Alterado Dinamicamente</center>");     
                    });
            });
        </script>

    </body>
</html>
0

É porque seu objeto está sendo criado dinamicamente, use:

$(document). on (function (){
      ... aqui o que você quer fazer, no caso o addClass

}
3
  • O ready só atribui os eventos ao término do carregamento da página, em nenhum outro momento Commented 21/02/2016 às 1:27
  • Trocar o ready pelo on não funcionou, nem com o elemento já criado Commented 21/02/2016 às 2:04
  • Com os elementos já criados o ready é necessário manter, agora para os criados dinamicamente vou pesquisar melhor Commented 21/02/2016 às 11:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .