プラグインで動作していない子divのjqueryクリックイベント

Question

各行にclickイベントを追加しようとしています。クリックすると、名前（例：Jeremy）を取得し、最上位のdivに配置して疑問符を置き換える必要があります。私のクリックイベントは、id = "data"ではしか動作しますが、子divでは動作しません。私はcodepenにも私のコードを持っています。http://codepen.io/rrschweitzer/pen/GrRyLg?editors=0110。どんな助けでも大歓迎です!!

これは私のhtmlです：

<div id="interview-test"> 
    <div class="top-bars"> 
    <div id="secret">???</div> 
    <button id="clear">Clear</button> 
    </div> 
    <div id="data"></div> 
</div> 

これは私のjQueryのです：

(function($) { 
    $.fn.interviewTest = function() { 
    var self = this; 
    var testData = null; 
    var url = "https://private-f3b4b-interview2.apiary-mock.com/data"; 

// create rows 
self.createRow = function(data) { 
    var theRow = $('<div>').addClass('rows') 
    .append($('<div>').addClass('image-container') 
     .append($('<img>').addClass('picture').attr('src', data.image))) 
    .append($('<div>').addClass('name').append($('<h1>').html(data.name))) 
    .append(self.getDate(data.timestamp)) 
    return theRow; 
} 

self.getDate = function(date) { 
    var date = date.slice(0,-3) 
    var newdate = new Date(date * 1000) 
    var year = newdate.getFullYear(); 
    var month = newdate.getMonth(); 
    var day = newdate.getDay() 
    var formattedDate = month + '/' + day + '/' + year 
    return formattedDate; 
} 
// api call 
$.ajax({ 
    beforeSend: function(xhr) { 
     xhr.setRequestHeader('Authorization', 'Basic '); 
    }, 
    url: url, 
    success: function(data, status) { 
     var dataObject = data; 
     var i = 0; 
     var testData = []; 

     for(var key in dataObject) { 
     testData[i] = dataObject[key] 
     i++; 
     } 
     // console.log(testData); 
     self.createDataList(testData, i); 
    } 
}) 

self.createDataList = function(data, size) { 
    var rows = $(self).find('#data'); 
    if (size != 0) { 
    $.each(data, function(key, value) { 
     // console.log(value) 
     rows.append(self.createRow(value)) 
    }) 
    } 
} 

// event listeners 
$(self).find('.rows').on('click', function(e) { 
    var current = $(e.currentTarget); 
    console.log(current); 
    // if(current) 
}) 
}}(jQuery))$('#interview-test').interviewTest(); 

Answer 1

あなたは要素（行）が作成された後、あなたのイベントリスナーを追加する必要があります。

(function($) { 
    $.fn.interviewTest = function() { 
    var self = this; 
    var testData = null; 
    var url = "https://private-f3b4b-interview2.apiary-mock.com/data"; 

// create rows 
self.createRow = function(data) { 
    var theRow = $('<div>').addClass('rows') 
    .append($('<div>').addClass('image-container') 
     .append($('<img>').addClass('picture').attr('src', data.image))) 
    .append($('<div>').addClass('name').append($('<h1>').html(data.name))) 
    .append(self.getDate(data.timestamp)) 
    return theRow; 
} 

self.getDate = function(date) { 
    var date = date.slice(0,-3) 
    var newdate = new Date(date * 1000) 
    var year = newdate.getFullYear(); 
    var month = newdate.getMonth(); 
    var day = newdate.getDay() 
    var formattedDate = month + '/' + day + '/' + year 
    return formattedDate; 
} 
// api call 
$.ajax({ 
    beforeSend: function(xhr) { 
     xhr.setRequestHeader('Authorization', 'Basic '); 
    }, 
    url: url, 
    success: function(data, status) { 
     var dataObject = data; 
     var i = 0; 
     var testData = []; 

     for(var key in dataObject) { 
     testData[i] = dataObject[key] 
     i++; 
     } 
     // console.log(testData); 
     self.createDataList(testData, i); 
    } 
}) 

self.createDataList = function(data, size) { 
    var rows = $(self).find('#data'); 
    if (size != 0) { 
    $.each(data, function(key, value) { 
     // console.log(value) 
     rows.append(self.createRow(value)) 
    }); 

    self.addEventListeners() 
    } 
} 

self.addEventListeners() { 
    // event listeners 
    $(self).find('.rows').on('click', function(e) { 
    var current = $(e.currentTarget); 
    console.log(current); 
    // if(current) 
    }) 
} 
}}(jQuery))$('#interview-test').interviewTest(); 

Answer 2

このためにイベントの委任を使用して、一致するセレクタの子要素のすべてに対して発生する親要素とイベントを関連付けることができますts。

$(self).on('click', ".rows",function(e) { 
     var current = $(this); 
     if(current) 
     { 
      var name = current.find(".name").text(); 
      $("#secret").text(name); 
     } 
    }) 

コードペン：http://codepen.io/anon/pen/EZxRwM?editors=0110

Answer 3

あなたのデモは、しかし、あなたはアヤックスが完了したと行はあなたがどちらか

を作成してきた前self.find('.rows')を探すためにしようとしているあなたのコードを見て動作しません。イベントを委任するか、ajaxの成功で行が追加されるまで待つ必要があります