1

Sou principiante no que toca a Javascript e jQuery e estou a tentar criar uma div dinamicamente, o meu objetivo é criar um bootstrap Alert sempre que o botão é pressionado mas não estou a conseguir que isso aconteça...

<button id="myBtn">Click Here</button>

Este é o script:

$("#myBtn").click(function() {
   $(this).after(
       '<div class="alert alert-success alert-dismissable">'+
            '<button type="button" class="close" ' + 
                    'data-dismiss="alert" aria-hidden="true">' + 
                '&times;' + 
            '</button>' + 
            'Password Changed' + 
        '</div>');
}); 

2 Respostas 2

2

Você pode manter o html separado o js colocando assim:

<div style="display: none;" class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
        &times;
    </button>
    Password Changed
</div>

<button id="myBtn">Click Here</button>

e no js assim:

$("#myBtn").click(function() {
    $('.alert').show();
});

mas lembre que quando você clica no X do alert ele remove o conteúdo e não é possível mostra-lo novamente. Para que isso não ocorra você pode adicionar um link ou botão que apenas oculta o alert.

Aqui tem um exemplo sem remover o alert

$("#myBtn").click(function() {
  $(".alert .mensagem").html('Sua mensagem aqui');
  $('.alert').show();
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div style="display: none;" class="alert alert-success alert-dismissable">
  <a class="close" onclick="$('.alert').hide()">&times;</a>
  <div class="mensagem"></div>
</div>

<button id="myBtn">Click Here</button>

5
  • O objetivo é criar div's dinamicamente e não só uma, existe alguma forma de fazê-lo da forma que você explicou?
    – Afonso
    Commented 24/04/2019 às 14:25
  • 1
    No exemplo do alert, você pode usar o mesmo alert para diversas mensagens e manter o html separado do js. Assim você não precisa criar o conteúdo, mas é possível sim criar o conteúdo, porém o ideal para manutenibilidade do código é manter separado. Você precisa realmente criar o conteúdo novo ou apenas alterar o texto da mensagem? Commented 24/04/2019 às 14:30
  • Preciso somente alterar o texto da imagem.
    – Afonso
    Commented 24/04/2019 às 14:35
  • Alterei o ultimo exemplo manipulando a mensagem Commented 24/04/2019 às 14:46
  • É isso mesmo que eu precisava, obrigado :)
    – Afonso
    Commented 24/04/2019 às 14:58
2

Para criar uma div com Jquery, é muito simples:

    $('<div>', {
    id: 'minhaDiv',
    class: 'minhaClasse',
    'outro-atributo': 'meuValor'
}).appendTo('body');

E você acrescenta isso a um onClick, fica a teu critério.

6
  • E como é que eu mudo o conteudo dessa Div ou o innerHTML suponho?
    – Afonso
    Commented 24/04/2019 às 13:56
  • 1
    você pode passar variáveis para dentro dos valores dos atributos, um exemplo seria: let meuValor = 'valor1' $('<div>', { html: meuValor, }).appendTo('body'); Commented 24/04/2019 às 13:58
  • Não entendi o que quis dizer com passar variáveis para dentro dos atributos, poderia explicar de outra forma por favor?
    – Afonso
    Commented 24/04/2019 às 14:00
  • 1
    Claro. Vamos resolver o seu problema de criar um alert: primeiro você cria a div com Jquery: let minhaDiv = $('<div>'); depois você acrescenta um conteudo a ela, as suas classes bootstraps: minhaDiv.addClass('alert alert-success alert-dismissable'); e você joga essa div criada para dentro de algum lugar, certo? pode ser o body: minhaDiv.appendTo('body'); Se você quiser criar um input e colocar dentro dessa div, é o mesmo processo, mas você coloca no final um appendChild(); api.jquery.com/append Commented 24/04/2019 às 14:05
  • 1
    no Jquery, se usa o .html('texto aqui dentro') para escrever alguma coisa no estilo label ou descrição de um botao, voce faria o seu $('<button>').html('texto do botao'); Commented 24/04/2019 às 17:12

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 .