1

Estou tentando pegar o valor de um input e um textarea com jquery mobile e adicionar os valores dentro de uma div usando append() só que não está funcionando? alguém consegue me dizer onde estou errando?

O input e a textarea estão dentro de um panel e quero adicionar os valores setados nele no content da pagina principal.

//Html da pagina principal que está dentro de data-role="page" e o id dessa page é id="index"
<section data-role="content">
        <h3>Todas as tarefas</h3>
        <div class="list">

        </div>
    </section>

//Inicio do Panel
<div data-role="panel" id="mypanel" data-display="overlay">
        <h4>Nova Tarefa</h4>
        <label for="tarefa">Adicionar Tarefas</label>
        <input type="text" id="tarefa" placeholder="Remédio, Mercado e etc...">
        <label for="detalhe">Detalhes</label>
        <textarea id="detalhe" cols="1" rows="1" placeholder="Exemplo: tomar remédio 'x', comprar leite e etc..."></textarea>
        <button type="button" id="btn" data-icon="check">Salvar</button>
    </div>

$( document ).on( "#index", function() {
    var nextId = 1;
    $("#btn").click(function() {
        var tarefa = $('input#tarefa').val(); //já tentei input[id=tarefa] e (#tarefa).
        var detalhe = $('textarea#detalhe').val(); //já tentei input[id=detalhe] e (#detalhe).
        nextId++;
        var content = "<div class='item" + nextId "'>" + tarefa + '</div>';
        $('.list').append(content);
    });
});
6
  • $( document ).on( "#index", function() {? qual é a ideia desta linha?
    – Sergio
    11/04/2015 às 23:54
  • pelo que pesquisei o documento tem que iniciar com este comando assim como o jquery inicia com $(documento).ready()
    – RFL
    12/04/2015 às 0:21
  • Nõ será $(document).on("pageinit", "#index", function() { ou $( document ).on("pagecreate", "#index", function() { ? podes testar?
    – Sergio
    12/04/2015 às 0:26
  • 1
    Onde estás a correr/carregar esse código? não vejo no HTML o código nem o ´<script src="...` a chmar esse código... github.com/Alkun/lembrete-app/blob/master/index.html#L8-L9
    – Sergio
    12/04/2015 às 0:43
  • 1
    Obrigado pela ajuda, o código funcinou com a linha $(document).on("pageinit", "#principal", function() { e eu havia esquecido de carregar o meu código Js.
    – RFL
    12/04/2015 às 1:00

1 Resposta 1

1

O método .on() precisa de um evento no primeiro argumento. Está a faltar o evento que faz disparar essa função callback no elemento #index, muda o código para:

$(document).on('pageinit', '#index', function(){

Outra coisa que te falta é incluir o ficheiro .js onde esse código está para ele ser carregado. O teu código:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width-device-width, initial-scale=1,"/>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   <title>minha app</title>
</head>

falta-lhe <script src="js/meuJs.js"></script>, junta isso depois da linha o jQuery mobyle.

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 .