Question

我从JSON调用创建元素以构建列表，如下所示。请注意，msg.id用于设置li的id。

                // create variations on somecharacter_id for id so that clicking upon any element reveals associated message id - see clickedId in .on(....)
                for (i = 0; i < messages.length; i++) {
                    var msg = messages[i];
                    var msgString = '<li id="' + msg.id + '" class="msgbox todo-content"><div class="todo-icon fui-bubble-16"></div><div class="todo-content"><h4 class="todo-name">';
                    msgString += msg.sendfrom;
                    msgString += '</h4>' + msg.subject;
                    msgString += '<div style="font-size:x-small;color:#bdc3c7;">' + parseTime(msg.timestamp_string) + '</div></div></li>';
                    $('#message-list').append(msgString);
                }

我希望检索相关行的msg.id，因此li被赋予类名.msgbox，我用.msgbox创建了一个.on（）事件。但是，里面是各种各样的div。当我点击li中的任何内容时，.on事件会触发（我相信这是预期的行为）。由于li内没有id，因此alert（event.target.id）显示为null。我应该在li中的每个子元素中添加id来捕获相关的id吗？当然有更好的方法。

 $('.msgbox').on('click', function (event) {                               // example 

                // get id
                var clickedId = event.target.id;

                alert(clickedId);
            });

Answer 1

替换

var clickedId = event.target.id;

与

var clickedId = this.id;

您对单击的最精确元素不感兴趣，但是在li上绑定了事件处理程序并且单击了该元素。此元素在事件处理程序中为this。

jquery .on意外地射击了儿童元素

1 个答案: