Jquery的JavaScript querySelector版本 [英] JavaScript querySelector versions of Jquery

问题描述

我正试图摆脱JQuery.

I am trying to move away from JQuery.

我有一个名为"clientProfiles"的div

I have a div called 'clientProfiles'

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

我的应用程序将像这样用按钮填充'div'.

my application will fill the 'div' with buttons like so.

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如下所示:

The html after a button has been added by a user looks like this:

<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)的图标从页面上删除.

These dynamically created buttons can be removed from the page by clicking an icon inside the main button labeled with a with a class called '.btnDeleteProfile'.

当我想将单击事件添加到JQuery中的'btnDeleteProfile'时，我可以使用以下方法:

When I wanted to add a click event to my 'btnDeleteProfile' in JQuery I could use this:

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

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

But now that I am not using JQuery, I'm having an issue targeting the '.btnDeleteProfile'.

document.querySelector('.btnDeleteProfile').addEventListener('click'，function(){});

document.querySelector('.btnDeleteProfile').addEventListener('click', function() {});

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

However MDN says that querySelector will only find the first instance of this, and there could very well be a ton of these buttons created all with different profile info attached.

查询选择器找不到"btnDeleteProfile".

the query Selector can't find the 'btnDeleteProfile'.

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

The error I am experiencing is 'can't add click event to null.

推荐答案

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

Use event delegation. With event delegation, you add an event handler to an element that will exist prior to the dynamic content being added. All events that occur to dynamically added elements will bubble up the DOM to the existing element that you've attached your handler to. Your event handler will then need to inspect the event to know if it should do what it should do.

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

In my simple example, I've attached a delegated handler to #list. It waits for an element with the .close class to be clicked, issuing a click event, to remove the li from the list.

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>

这篇关于Jquery的JavaScript querySelector版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！