javascript - Jquery的JavaScript querySelector版本

我试图摆脱JQuery。

我有一个名为“ clientProfiles”的div

<div class="paperlist" data-role='listview' data-inset='true' data-split-icon='delete' id='clientProfiles'></div>

我的应用程序将使用类似的按钮填充“ div”。

function getClientHtml(device) {

                var html = "";
                html += '<div data-name="' + device.Name + '" data-id="' + device.Id + '"data-app="' + device.AppName + '" style="border-radius: 2px; border: 1px solid rgba(0,0,0,0.158)" class="clientProfile listItem">';
                html += '<img style="float-left; width:3%;" src="' + deviceNameImage(device.Name) + '"/>';
                html += '<div class="listItemBody">';
                html += '<h3 class="listItemBodyText">' + device.Name + ' - ' + device.AppName + '</h3>';
                html += '</div>';
                html += '<i class="md-icon btnDeleteProfile" data-index="0">close</i>';
                html += '</div>';
                html += '<br />';
                return html;
            };

用户添加按钮后的html如下所示：

<div class="paperlist" data-role="listview" data-inset="true" data-split-icon="delete" id="clientProfiles">
<div data-name="Xbox One" data-id="mcX7xXZksA1fJooKY2SRS5soNbFgM4lQurFx3bxr2s" data-app="Theater" style="border-radius: 2px; border: 1px solid rgba(0,0,0,0.158)" class="clientProfile listItem">
<img style="float-left; width:3%;" src="../images/devices/xboxone.png"><div class="listItemBody"><h3 class="listItemBodyText">XBLAHBLAHNAME</h3>
</div>
<i class="md-icon btnDeleteProfile" data-index="0">close</i>
</div>
<br>
</div>

这些动态创建的按钮可以通过单击主按钮中标有的类（称为.btnDeleteProfile）的图标从页面中删除。

当我想在JQuery的'btnDeleteProfile'中添加点击事件时，可以使用以下方法：

 $('#clientProfiles', page).on('click', '.btnDeleteProfile', function () {});

但是，由于我现在不使用JQuery，所以我遇到了针对'.btnDeleteProfile'的问题。

document.querySelector（'。btnDeleteProfile'）。addEventListener（'click'，function（）{}）;

但是MDN表示，querySelector只会找到它的第一个实例，并且很可能会创建大量的这些按钮，并附加了不同的配置文件信息。

查询选择器找不到“ btnDeleteProfile”。

我遇到的错误是“无法将点击事件添加为null。

最佳答案

您可以使用：


  Event​.target：Event接口的target属性是对调度事件的对象的引用。


片段：

function getClientHtml(device) {

    var html = "";
    html += '<div data-name="' + device.Name + '" data-id="' + device.Id + '"data-app="' + device.AppName + '" style="border-radius: 2px; border: 1px solid rgba(0,0,0,0.158)" class="clientProfile listItem">';
    html += '<img style="float-left; width:3%;" src="../images/devices/xboxone.png"/>';
    html += '<div class="listItemBody">';
    html += '<h3 class="listItemBodyText">' + device.Name + ' - ' + device.AppName + '</h3>';
    html += '</div>';
    html += '<i class="md-icon btnDeleteProfile" data-index="0">close</i>';
    html += '</div>';
    html += '<br />';
    return html;
}

 var clientProfiles = document.querySelector('#clientProfiles');

clientProfiles.innerHTML += getClientHtml({Name: 'Xbox One', id: "mcX7xXZksA1fJooKY2SRS5soNbFgM4lQurFx3bxr2s", AppName: 'Theater'});
clientProfiles.addEventListener('click', function(e) {
    if (e.target.classList.contains('btnDeleteProfile')) {
        e.target.closest('div').remove();
        console.log('Do it');
    }
})

<div class="paperlist" data-role="listview" data-inset="true" data-split-icon="delete" id="clientProfiles">
    <div data-name="Xbox One" data-id="mcX7xXZksA1fJooKY2SRS5soNbFgM4lQurFx3bxr2s" data-app="Theater" style="border-radius: 2px; border: 1px solid rgba(0,0,0,0.158)" class="clientProfile listItem">
        <img style="float-left; width:3%;" src="../images/devices/xboxone.png"><div class="listItemBody"><h3 class="listItemBodyText">XBLAHBLAHNAME</h3>
    </div>
        <i class="md-icon btnDeleteProfile" data-index="0">close</i>
    </div>
    <br>
</div>

关于javascript - Jquery的JavaScript querySelector版本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56400619/