javascript点击事件未触发答案

【问题标题】：javascript click event not firingjavascript点击事件未触发
【发布时间】：2017-06-10 20:12:37
【问题描述】：

我无法弄清楚为什么我的点击事件没有触发。我正在尝试单击垃圾桶图标并运行一个删除列表元素的函数。在单击事件之后，它无法执行脚本中的任何其他内容。它甚至没有直接在下面 console.log 任何东西。下面是标记和我的脚本。

HTML 代码

<div class="col-6">
    <div class="js-list-item">
        <h3 class="js-list-title"></h3>
        <a href="" id="js-edit"><i class="fa fa-pencil" aria-hidden="true"></i></a>
        <a href=""id="js-delete"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
        <p>Date: <span class="js-date"></span></p>
        <p>Schedule: <span class="js-schedule"></span> at <span class="js-schedule-time">
        </span></p>
    </div>
</div>

javascript 代码

function handleDelete() {
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
    console.log('test');
    e.preventDefault();
    deleteShow(
        $(e.currentTarget).closest('.js-list-item').attr('id')
    );
});
}

【问题讨论】：

你加载了 JQuery 吗？
在浏览器中检查控制台日志
deleteShow() 函数在哪里？
你的函数handleDelete什么时候被调用？您需要先执行该函数以绑定侦听器
handleDelete 在文件的底部被调用，就像这样。 $(function() { handleDelete();});

标签： javascript jquery event-delegation

【解决方案1】：

.on()函数的第二个参数是一个选择器。

http://api.jquery.com/on/

变化：

$('.js-list-item').on('click', 'fa-trash-o', function(e) {

到：

$('.js-list-item').on('click', '.fa-trash-o', function(e) {

【讨论】：

@Jameson，还要加一个空格把<a href=""id="js-delete">改成<a href="" id="js-delete">。甚至更好：<a href=# id="js-delete">。 # 告诉现代浏览器不要在点击时实际加载页面。签出：stackoverflow.com/a/34834047

【解决方案2】：

('click', 'fa-trash-o', function(e)

fa-trash-o 不是合适的选择器，请使用 class 或 id

【讨论】：