JavascriptQuerySelector版本的Jquery

我正试图离开JQuery

我有一个名为“clientProfiles”的部门

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

但是现在我没有使用JQuery，我在针对“.btnDeleteProfile”时遇到了一个问题

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

然而，MDN说querySelector只会找到这个的第一个实例，而且很可能会创建大量这些按钮，所有这些按钮都附带了不同的配置文件信息

查询选择器找不到“btnDeleteProfile”

我遇到的错误是“无法将单击事件添加到null”。您可以使用：

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

片段：

函数getClientHtml（设备）{ var html=“”； html+=''； html+=''； html+=''； html+=''+device.Name+'-'+device.AppName+''； html+=''； html+=“关闭”； html+=''； html+='
'； 返回html； } var clientProfiles=document.querySelector（“#clientProfiles”）； clientProfiles.innerHTML+=getClientHtml（{Name:'Xbox One'，id:'mcX7xXZksA1fJooKY2SRS5soNbFgM4lQurFx3bxr2s'，AppName:'Theater'}）； clientProfiles.addEventListener（'click'，函数（e）{ if（e.target.classList.contains（'btnDeleteProfile'））{ e、 target.closest（'div'）.remove（）； log（'Do it'）； } })

XBLAHBLAHNAME
关闭

您可以使用：

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

片段：

函数getClientHtml（设备）{ var html=“”； html+=''； html+=''； html+=''； html+=''+device.Name+'-'+device.AppName+''； html+=''； html+=“关闭”； html+=''； html+='
'； 返回html； } var clientProfiles=document.querySelector（“#clientProfiles”）； clientProfiles.innerHTML+=getClientHtml（{Name:'Xbox One'，id:'mcX7xXZksA1fJooKY2SRS5soNbFgM4lQurFx3bxr2s'，AppName:'Theater'}）； clientProfiles.addEventListener（'click'，函数（e）{ if（e.target.classList.contains（'btnDeleteProfile'））{ e、 target.closest（'div'）.remove（）； log（'Do it'）； } })

XBLAHBLAHNAME
关闭

通过创建自己的委托事件侦听器逻辑，您可以稍微概括一下这一点

• 将事件侦听器绑定到父级
• 事件发生时，查找与子选择器匹配的父级的所有子级
• 如果事件起源的元素位于该子列表中，则对其应用事件回调

Element.prototype.addDelegateEventListener=函数（eventType、childSelector、回调）{
var parentElement=this；
parentElement.addEventListener（事件类型，函数（事件）{
var children=[…parentElement.querySelectorAll（childSelector）]；
if（子项包括（事件目标））{
apply（event.target，参数）；
}
});
};
document.getElementsByTagName（'button'）[0]。addEventListener（'click'，function（））{
document.querySelector（“#parent”）.innerHTML+=`Click Me`；
});
document.getElementById（'parent'）.addDelegateEventListener（'click'，'clickMe'，函数（e）{
console.log（this）；
console.log（如target）；
});
添加元素
没有对手
间接子代
通过创建自己的委托事件侦听器逻辑，您可以稍微概括一下这一点


将事件侦听器绑定到父级
事件发生时，查找与子选择器匹配的父级的所有子级
如果事件起源的元素位于该子列表中，则对其应用事件回调


Element.prototype.addDelegateEventListener=函数（eventType、childSelector、回调）{
var parentElement=this；
parentElement.addEventListener（事件类型，函数（事件）{
var children=[…parentElement.querySelectorAll（childSelector）]；
if（子项包括（事件目标））{
apply（event.target，参数）；
}
});
};
document.getElementsByTagName（'button'）[0]。addEventListener（'click'，function（））{
document.querySelector（“#parent”）.innerHTML+=`Click Me`；
});
document.getElementById（'parent'）.addDelegateEventListener（'click'，'clickMe'，函数（e）{
console.log（this）；
console.log（如target）；
});
添加元素
没有对手
间接子代
使用事件委派。通过事件委派，可以将事件处理程序添加到将在添加动态内容之前存在的元素中。动态添加的元素发生的所有事件都会使DOM冒泡到已附加处理程序的现有元素。然后，您的事件处理程序将需要检查事件，以了解它是否应该执行它应该执行的操作

在我的简单示例中，我将一个委托处理程序附加到
#list
。它等待单击带有
.close
类的元素，并发出
click
事件，以从列表中删除
li


var addItemToList=函数addItemToList（列表节点，文本）{
var li=document.createElement（'li'）；
var spanClose=document.createElement（'span'）；
var spanNothing=document.createElement（'span'）；
li.textContent=文本；
spanClose.className='close'；
spanClose.innerHTML=⨯';
spanNothing.className='nothing'；
spanNothing.innerHTML=★';
li.追加儿童（spanClose）
li.儿童（无）；
appendChild（li）；
};
var getRandomText=函数getRandomText（）{
返回randomText[Math.floor（Math.random（）*3）]；
};
var removeListItem=函数removeListItem（e）{
//e.目标=
if（e.target.classList.contains（'close'））{
var li=e.target.parentNode；
var ul=li.parentNode；
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;
            };

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

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

// use querySelectorAll to get a node list of the elements, similar to how you would get a jQuery object in jQuery
var deleteButtons = document.querySelectorAll(".btnDeleteProfile");

// iterate over the node list just like you would in jQuery with .each()
deleteButtons.forEach(function(button) {
  // do something with the individual element
  console.log(button);
});