Jquery 的 JavaScript querySelector 版本

Question

我正在尝试摆脱 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”。

我遇到的错误是'can't add click event to null.

Answer 1

你可以使用：

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

sn-p：

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>

Answer 2

使用事件委托。使用事件委托，您可以将事件处理程序添加到将在添加动态内容之前存在的元素。动态添加的元素发生的所有事件都会使 DOM 冒泡到您已将处理程序附加到的现有元素。然后，您的事件处理程序将需要检查该事件以了解它是否应该执行它应该执行的操作。

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

var addItemToList = function addItemToList( listNode, text ) {
  
  var li          = document.createElement( 'li' );
  var spanClose   = document.createElement( 'span' );
  var spanNothing = document.createElement( 'span' );
  
  li.textContent = text;

  spanClose.className = 'close';
  spanClose.innerHTML = '⨯';

  spanNothing.className = 'nothing';
  spanNothing.innerHTML = '★';

  li.appendChild( spanClose )
  li.appendChild( spanNothing );
  listNode.appendChild( li );

};

var getRandomText = function getRandomText() {
  return randomText[ Math.floor(Math.random() * 3) ];
};

var removeListItem = function removeListItem( e ) {

  // e.target = <span>
  if ( e.target.classList.contains( 'close' ) ) {
  
    var li = e.target.parentNode; 
    var ul = li.parentNode;

    ul.removeChild( li );

  }

}

var addToListBtn = document.querySelector( 'button' );
var theList      = document.querySelector( '#list' );
var randomText   = [ 'Hello!', 'Huh?', 'Okay' ];

addToListBtn.addEventListener( 'click', function ( e ) {
  addItemToList( theList, getRandomText() );
} );

theList.addEventListener( 'click', removeListItem );

li {
  line-height: 1.5;
}

li span {
  border: 1px solid #ccc;
  margin-left: 1rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

<button>Add to List</button>

<ul id="list"></ul>

Answer 3

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

• 将事件监听器绑定到父级
• 当事件发生时，找到所有匹配子选择器的父子节点
• 如果事件源自的元素在该子列表中，则对其应用事件回调。

Element.prototype.addDelegateEventListener = function (eventType, childSelector, callback) {
  var parentElement = this;
  
  parentElement.addEventListener(eventType, function(event){
    var children = [...parentElement.querySelectorAll(childSelector)];
    
    if (children.includes(event.target)) {
      callback.apply(event.target, arguments);
    }
  });
};


document.getElementsByTagName('button')[0].addEventListener('click', function(){
  document.querySelector('#parent').innerHTML += `<div class="clickMe" data-created-on="${Date.now()}">Click Me</div>`;
});

document.getElementById('parent').addDelegateEventListener( 'click', '.clickMe', function(e){
  console.log(this);
  console.log(e.target);
});

<button>Add Element</button>
<div id="parent">
  <div>No Match</div>
  <div>
    <div class="clickMe">Indirect Child</div>
  </div>
</div>

Answer 4

好的，如果您只是想让该代码正常工作，gaetanoM 的回答非常棒。

但是，您的问题的核心似乎是如何定位 所有 的删除按钮以附加该功能。因此，为了将来参考，您可以使用 querySelectorAll 和 forEach，如 MDN 所示：

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#Accessing_the_matches

// 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);
});