jqueryの - 基本的に、私は私のページに新しいフォームの行を追加ボタンを持っている...私は、複数のソリューションを試してみたが、どれも働いていないと私は理由を理解していない</p> <p>をイベントリスナーを動的に作成するためのボタン

Question

を追加名前、開始、色のフィールドと保存ボタンがあります。

私がする必要があるのは、保存をクリックするとフォームフィールドを保存することです。ここで

は、私が使用しようとしているが、それは働いていないコードです：

var i = 0; 
var addCounter = $("#addCounter"); 

addCounter.on("click", function() { 
    ++i; 
    var body = $("body"); 
    var save = $('#save-' + i); 
    var name = $("#counterName-" + i); 
    var date = $("#counterStart-" + i); 
    var color = $("#counterColor-" + i); 
    var status = $("#status-" + i); 

    var templateToAppend = '<li class="list-group-item">' + 
     '<div class="form-inline">' + 
     '<div class="form-group">' + 
     '<label for="counterName-' + i + '">Counter Name</label>' + 
     '<input type="text" id="counterName-' + i + '" placeholder="Counter name"/></div>' + 
     '<div class="form-group">' + 
     '<label for="counterStart-' + i + '">Starting from:</label>' + 
     '<input type="text" id="counterStart-' + i + '" placeholder="dd/mm/yy"/></div>' + 
     '<div class="form-group">' + 
     '<label for="counterColor-' + i + '">Counter Color:</label>' + 
     '<input id="counterColor-' + i + '" class="jscolor"></div>' + 
     '<button id="save-' + i + '" class="btn btn-primary">Save</button>' + 
     '<div id="status-' + i + '"></div></div></li>'; 
    body.append(templateToAppend); 
    save.click(function() { 
     debugger; 
     console.log("clicked on save: ", save); 
     var localStorage = { 
      id: i, 
      counterName: name.value, 
      counterDate: date.value, 
      counterColor: color.value 
     }; 

     console.log(localStorage); 
    }); 
}); 

デバッガが実行されることはありませんし、私は理由を理解していません。

理由を理解してもらえますか？

おかげでたくさん

Answer 1

DOMには存在しない要素のjqueryオブジェクトを作成しようとしているからです。最初に要素を追加してから要素をセレクタで取得する必要があります。このように：

body.append(templateToAppend); 
var save = $('#save-' + i); 
var name = $("#counterName-" + i); 
var date = $("#counterStart-" + i); 
var color = $("#counterColor-" + i); 
var status = $("#status-" + i); 

また、動的に追加された要素にイベントを添付するには、はるかにクリーンな方法があります。もし第2のクリックイベントのEvent Delegation

Answer 2

var save = $('#save-' + i); 

ボタンを文書に追加される前に、コードのこの行が実行されています。

saveは空の配列になります。

Answer 3

使用イベントの委任を見て、最初のクリックイベントの外

$('body').on('click','.list-group-item btn',function() { 
     console.log("clicked on save: ", $(this).attr('id')); 
     var i = $(this).attr('id').split('-')[1]; 
     var localStorage = { 
     id: i, 
     counterName: $("#counterName-" + i).val(), 
     counterDate: $("#counterStart-" + i).val(), 
     counterColor: $("#counterColor-" + i).val() 
    }; 

    console.log(localStorage); 
    });