jquery Click-Ereignis für Kind div funktioniert nicht in Plugin

Question

Ich versuche, ein Klickereignis für jede Zeile hinzuzufügen. Beim Klicken muss ich in der Lage sein, den Namen (z. B. Jeremy) zu nehmen und in das oberste div zu setzen, um die Fragezeichen zu ersetzen. Mein Klickereignis funktioniert nur mit id = "data", aber nicht mit den untergeordneten divs. Ich habe meinen Code hier auf Codepen http://codepen.io/rrschweitzer/pen/GrRyLg?editors=0110. Jede Hilfe wird sehr geschätzt !!

Das ist mein html:

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

Das ist mein JQuery ist:

(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 1

Sie benötigen eine Event-Listener nach Elemente (Zeilen) erstellt werden, hinzufügen Sie können Ereignisdelegierung dafür verwenden, um das Ereignis mit dem übergeordneten Element anzuhängen, das für alle übereinstimmenden Selektor-Child-Elemente ausgelöst wird ts.

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

Code Stift: http://codepen.io/anon/pen/EZxRwM?editors=0110

Answer 2

:

(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 3

Ihre Demo jedoch nicht an Ihrem Code suchen Sie funktioniert für self.find('.rows') zu suchen versuchen, bevor das Ajax abgeschlossen ist und die Reihen haben

Sie entweder erstellt muss das Ereignis delegieren oder warten, bis Zeilen im Ajax-Erfolg hinzugefügt werden