点击未在子div中捕获的事件

Question

我正在尝试使用基本HTML，css和JQuery的列表组件。我希望在点击事件中选择列表项。当我点击列表项的文本（padding space）周围的空格时，会捕获点击事件。但是当我点击文本（也是整个file-name div占用的空间）时，不会捕获点击事件。可能是因为里面的孩子div？任何帮助，将不胜感激。感谢。

＆＃13;

＆＃13;

function selectFile(id, key) {
  if($(id).hasClass('selected')) {
    $(id).removeClass('selected');
  } else {
    $(id).addClass('selected');
  }
}

$('.file-list-section').on('click', function(event) {
  selectFile('#'+event.target.id, event.target.dataset.key);
})

＆＃13;

.file-row {
    padding: 10px;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}
.file-list-section .file-row.selected {
    background: #26a69a;
    color: white;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="fileList" class="file-list-section">
  <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg">
    <div class="file-name">cd58ef701e28f6df8.jpg</div>
  </div>
  <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg">
    <div class="file-name">a682e06e25c5c86.jpg</div>
  </div>
  <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg="">
    <div class="file-name">Jefree copy.jpeg</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的代码专注于整个列表的类，而不是单独处理每个列表项。我已经简化了你的jQuery，如果我点击＆＃34;这个＆＃34; .file-row切换类Selected。这允许不止一个突出显示。如果您一次只想要一个，请清除所有选择的＆＃39;每次点击都有课程。

＆＃13;

＆＃13;

$('.file-row').removeClass('selected');

$('.file-row').click(function(){
$(this).toggleClass('selected');
})

＆＃13;

.file-row {
    padding: 10px;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}
.file-list-section .file-row.selected {
    background: #26a69a;
    color: white;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="fileList" class="file-list-section">
  <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg">
    <div class="file-name">cd58ef701e28f6df8.jpg</div>
  </div>
  <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg">
    <div class="file-name">a682e06e25c5c86.jpg</div>
  </div>
  <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg="">
    <div class="file-name">Jefree copy.jpeg</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您应该将file-row定位为事件绑定，并使用this执行所需的操作。

function selectFile() {
  $(this).toggleClass('selected');
  
  console.clear();
  console.log($(this).data("key"), $(this).find('.file-name').text());
}

$('.file-list-section').on('click', '.file-row', selectFile)

.file-row {
  padding: 10px;
  border-bottom: 1px solid lightgray;
  cursor: pointer;
}

.file-list-section .file-row.selected {
  background: #26a69a;
  color: white;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="fileList" class="file-list-section">
  <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg">
    <div class="file-name">cd58ef701e28f6df8.jpg</div>
  </div>
  <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg">
    <div class="file-name">a682e06e25c5c86.jpg</div>
  </div>
  <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg="">
    <div class="file-name">Jefree copy.jpeg</div>
  </div>
</div>

Answer 3

使用以下内容更新您的脚本..

＆＃13;

＆＃13;

function selectFile(id, key) {
  if($(id).hasClass('selected')) {
    $(id).removeClass('selected');
  } else {
    $(id).addClass('selected');
  }
}

$('.file-list-section .file-row').on('click', function(event) {
  selectFile('#'+$(this).attr('id'), $(this).data('key'));
})

＆＃13;

.file-row {
    padding: 10px;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}
.file-list-section .file-row.selected {
    background: #26a69a;
    color: white;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="fileList" class="file-list-section">
  <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg">
    <div class="file-name">cd58ef701e28f6df8.jpg</div>
  </div>
  <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg">
    <div class="file-name">a682e06e25c5c86.jpg</div>
  </div>
  <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg="">
    <div class="file-name">Jefree copy.jpeg</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您在传递事件时过于狭隘 - 而是使用键

将事件处理程序添加到div中

还要切换类而不是测试类：

＆＃13;

＆＃13;

$('.file-row').on('click', function(e) {
  $(this).toggleClass('selected');
  console.log($(this).data("key"))
});

＆＃13;

.file-row {
    padding: 10px;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}
.file-list-section .file-row.selected {
    background: #26a69a;
    color: white;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="fileList" class="file-list-section">
  <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg">
    <div class="file-name">cd58ef701e28f6df8.jpg</div>
  </div>
  <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg">
    <div class="file-name">a682e06e25c5c86.jpg</div>
  </div>
  <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg="">
    <div class="file-name">Jefree copy.jpeg</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

function selectFile(id, key) {
  if($(id).hasClass('selected')) {
    $(id).removeClass('selected');
  } else {
    $(id).addClass('selected');
  }
}

$('.file-list-section .file-row').on('click', function(event) {

  selectFile('#'+$(this).attr('id'), $(this).data('key'));
})

.file-row {
    padding: 10px;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}
.file-list-section .file-row.selected {
    background: #26a69a;
    color: white;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="fileList" class="file-list-section">
  <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg">
    <div class="file-name">cd58ef701e28f6df8.jpg</div>
  </div>
  <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg">
    <div class="file-name">a682e06e25c5c86.jpg</div>
  </div>
  <div class="file-row" id="fileId_2" data-key="Jefree copy.jpeg">
    <div class="file-name">Jefree copy.jpeg</div>
  </div>
</div>