子div的jquery点击事件在插件中不起作用

Question

我正在尝试在每一行上添加一个点击事件。单击时，我需要能够获取名称（例如 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

您可以为此使用事件委托将事件附加到父元素，该事件将为所有匹配的选择器子元素触发。

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

您的演示不起作用，但是在 ajax 完成并创建行之前查看您尝试查找的代码 self.find('.rows')

您要么需要委托事件，要么等到在 ajax 成功中添加行