2016-05-08 6 views
1

最近JQueryを開始したので、datepicker JQuery関数を使用してリストを作成する必要があります。問題は私の前置きから始まります。なぜなら、datepickerから取得した日付、イベント、そしてその行の何かを消去するための新しいボタンを追加する必要があるからです(ボタンをリスト項目の前に置く必要があります)。私はこの部分にいくつか問題があります。 「私はこれはおそらく非常に単純であるかなり確信しているが、私は今だけ周りを探し始めていると私は、検索しようと、すべてが過度に複雑またはdoesnのいずれかである私の前置詞リスト項目に沿ってボタンを作成したい

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Datepicker - Display month &amp; year menus</title> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

     <link rel="stylesheet" href="css.css"> 

     <script> 
     $(function() { 
     $("#datepicker").datepicker({ 
      changeMonth: true, 
      changeYear: true 
     }); 
     }); 

     $(document).on('click', '#bta', '#apagar', function() { 

     if ($('#datepicker').val() != '' && $('#evento').val() != '') { 
      $('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + $('<input type="button" id="apagar" value="apagar" />') + '</p>'); 
      $('input').val(''); 
     } 

    }); 

     </script> 
    </head> 

    <body> 
     <div id="box"> 
      Lista de Tarefas: 
      <br><br> 
      Date: <input type="text" id="datepicker"> &nbsp; &nbsp; 

      Event: <input type="text" id="evento"> <button id="bta" class="bta">+</button> 

      <div id="caixa"> </div> 
      </body> 
     </div> 

</html> 

この

は私が持っているコードです。私の問題を解決することはできません。もちろん、私が見つけたソリューションを実装することができないことは、非常にうまくいくかもしれません。

This is to help visualize my problem

+0

'」

'+ $(' #の日付ピッカー ')。ヴァル()+ $(' #1 EVENTO ')。ヴァル()+ $('

' –

答えて

1

jQuery.prepend htmlStringれる引数または要素もしくはArrayまたはjQueryの要素をとります。 htmlStringを選択しますが、この文字列にjQueryオブジェクトを追加しています。これは明らかに機能しません。

私たちは実際に何をしたいですか?さて、<p>タグを作成し、datepicker値、イベント値、ボタンを追加します。

var $p = $("<p></p>"); 
$p.append($('#datepicker').val(), $('#evento').val(), $('<input type="button" id="apagar" value="apagar" />')); 
$('#caixa').prepend($p); 

または、文字列をjqueryオブジェクトに変換して文字列に戻す手順を省略します。

$('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + '<input type="button" id="apagar" value="apagar" /></p>'); 
関連する問題