Псевдоэлемент :focus-within
позволяет выбрать родителя, если у потомка есть фокус.
Элемент может быть сфокусирован, если он имеет атрибут tabindex
.
Поддержка браузера для фокуса внутри
Пример
.click {
cursor: pointer;
}
.color:focus-within .change {
color: red;
}
.color:focus-within p {
outline: 0;
}
I will change color
Click me
Начиная с jQuery 1.7, вы должны использовать jQuery.fn.on
:
$(staticAncestors).on(eventName, dynamicChild, function() {});
До этого рекомендуется использовать live()
:
$(selector).live( eventName, function(){} );
Однако live()
устарел в 1.7 в пользу on()
и полностью удален в 1.9. Подпись live()
:
$(selector).live( eventName, function(){} );
... может быть заменена следующей on()
сигнатурой:
$(document).on( eventName, selector, function(){} );
Например, если ваша страница динамически создавала элементы с именем класса dosomething
, вы привязывали бы событие к родительскому, который уже существует (здесь есть нуль проблемы, вам нужно что-то, что существует для привязки, не привязка к динамическому контенту), это может быть (и самый простой вариант) - document
. Хотя иметь в виду document
, возможно, не самый эффективный вариант .
$(document).on('mouseover mouseout', '.dosomething', function(){
// what you want to happen when mouseover and mouseout
// occurs on elements that match '.dosomething'
});
Любой родитель, который существует в момент привязки события, прекрасен. Например,
$('.buttons').on('click', 'button', function(){
// do something here
});
применимо к
<div class="buttons">
<!-- <button>s that are generated dynamically and added here -->
</div>
Любой родитель, который существует в момент привязки события, и если ваша страница динамически создавала элементы с помощью кнопки имени класса, вы привязывали бы событие к родительскому, который уже существует
$(document).ready(function(){
//Particular Parent chield click
$(".buttons").on("click","button",function(){
alert("Clicked");
});
//Dynamic event bind on button class
$(document).on("click",".button",function(){
alert("Dymamic Clicked");
});
$("input").addClass("button");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
<input type="button" value="1">
<button>2</button>
<input type="text">
<button>3</button>
<input type="button" value="5">
</div>
<button>6</button>
Это чистое решение для JavaScript без каких-либо библиотек или плагинов:
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'bu')) {
// .bu clicked
// Do your thing
} else if (hasClass(e.target, 'test')) {
// .test clicked
// Do your other thing
}
}, false);
, где hasClass
-
function hasClass(elem, className) {
return elem.className.split(' ').indexOf(className) > -1;
}
Кредит относится к Dave и Sime Vidas
Использование более современных JS, hasClass
может быть реализовано как:
function hasClass(elem, className) {
return elem.classList.contains(className);
}
Element.classList
не поддерживается в старых браузерах. Например, IE & lt; 9.
– Ram Patra
9 August 2016 в 10:59
Я искал решение, позволяющее работать $.bind
и $.unbind
без проблем в динамически добавленных элементах.
Поскольку on () делает трюк для присоединения событий, чтобы создать фальшивую отвязку на тех, к которым я пришел:
const sendAction = function(e){ ... }
// bind the click
$('body').on('click', 'button.send', sendAction );
// unbind the click
$('body').on('click', 'button.send', function(){} );
<html>
<head>
<title>HTML Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="hover-id">
Hello World
</div>
<script>
jQuery(document).ready(function($){
$(document).on('mouseover', '#hover-id', function(){
$(this).css('color','yellowgreen');
});
$(document).on('mouseout', '#hover-id', function(){
$(this).css('color','black');
});
});
</script>
</body>
</html>
Используйте метод .on()
jQuery http://api.jquery.com/on/ для присоединения обработчиков событий к элементу live.
Также с версии 1.9 .live()
удаляется.
Вот почему динамически созданные элементы не реагируют на клики & nbsp;:
var body = $("body");
var btns = $("button");
var btnB = $("<button>B</button>");
// `<button>B</button>` is not yet in the document.
// Thus, `$("button")` gives `[<button>A</button>]`.
// Only `<button>A</button>` gets a click listener.
btns.on("click", function () {
console.log(this);
});
// Too late for `<button>B</button>`...
body.append(btnB);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>
В качестве обходного пути вы должны прослушивать все клики и проверять исходный элемент & nbsp;:
var body = $("body");
var btnB = $("<button>B</button>");
var btnC = $("<button>C</button>");
// Listen to all clicks and
// check if the source element
// is a `<button></button>`.
body.on("click", function (ev) {
if ($(ev.target).is("button")) {
console.log(ev.target);
}
});
// Now you can add any number
// of `<button></button>`.
body.append(btnB);
body.append(btnC);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>
Это называется «Event Delegation». Хорошие новости, это встроенная функция в jQuery: -)
var i = 11;
var body = $("body");
body.on("click", "button", function () {
var letter = (i++).toString(36).toUpperCase();
body.append($("<button>" + letter + "</button>"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>
Я предпочитаю использовать селектор, и я применяю его в документе.
Это привязывается к документу и будет применяться к элементам, которые будут отображаться после загрузки страницы.
Например:
$(document).on("click", $(selector), function() {
// Your code here
});
selector
, когда он должен содержать строку или элемент Element, которые вы можете просто передать непосредственно этому аргументу в on()
– Rory McCrossan
20 June 2018 в 14:57
вы можете использовать
$('.buttons').on('click', 'button', function(){
// your magic goes here
});
или
$('.buttons').delegate('button', 'click', function() {
// your magic goes here
});
, эти два метода эквивалентны, но имеют другой порядок параметров.
см .: Событие делегата jQuery
Вы можете присоединить событие к элементу при динамическом создании с помощью jQuery(html, attributes)
.
Начиная с jQuery 1.8, любой метод экземпляра jQuery (метод
jQuery.fn
) можно использовать как свойство объекта, переданного второму параметру:
function handleDynamicElementEvent(event) { console.log(event.type, this.value) } // create and attach event to dynamic element jQuery("<select>", { html: $.map(Array(3), function(_, index) { return new Option(index, index) }), on: { change: handleDynamicElementEvent } }) .appendTo("body");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
Это делается путем делегирования событий. Событие будет привязываться к элементу-оболочке, но будет делегировано элементу селекторного класса. Вот как это работает.
$('.wrapper-class').on("click", '.selector-class', function() {
// Your code here
});
Элемент-оболочка-оболочка может быть любым ex. документа, тела или вашей обертки. Упаковщик должен уже существовать.
Обратите внимание на класс «MAIN», в который помещается элемент, например
<div class="container">
<ul class="select">
<li> First</li>
<li>Second</li>
</ul>
</div>
. В приведенном выше сценарии объект MAIN, который будет наблюдать jQuery, является «контейнером».
Тогда вы в основном будете иметь имена элементов в контейнере, такие как ul
, li
и select
:
$(document).ready(function(e) {
$('.container').on( 'click',".select", function(e) {
alert("CLICKED");
});
});
myElement.append('body');
должен быть myElement.appendTo('body');
. С другой стороны, если нет необходимости в дальнейшем использовании переменной myElement
, это проще и короче: $('body').append($('<button/>', { text: 'Go to Google!' }).bind( 'click', goToGoogle));
– ddlab
11 May 2017 в 19:58
Более гибкое решение для создания элементов и связывания событий ( source )
// creating a dynamic element (container div)
var $div = $("<div>", {id: 'myid1', class: 'myclass'});
//creating a dynamic button
var $btn = $("<button>", { type: 'button', text: 'Click me', class: 'btn' });
// binding the event
$btn.click(function () { //for mouseover--> $btn.on('mouseover', function () {
console.log('clicked');
});
// append dynamic button to the dynamic container
$div.append($btn);
// add the dynamically created element(s) to a static element
$("#box").append($div);
Примечание. Это создаст экземпляр обработчика события для каждого элемента (может повлиять на производительность при использовании в петлях)
Попробуйте это -
$(document).on( 'click', '.click-activity', function () { ... });
Я предпочитаю, чтобы прослушиватели событий были развернуты модульной функцией, а не сценарием прослушивателя событий уровня document
. Итак, мне нравится ниже. Обратите внимание: вы не можете переадресовать элемент с одним и тем же прослушивателем событий, поэтому не беспокойтесь о прикреплении слушателя более одного раза - только один палец.
var iterations = 4;
var button;
var body = document.querySelector("body");
for (var i = 0; i < iterations; i++) {
button = document.createElement("button");
button.classList.add("my-button");
button.appendChild(document.createTextNode(i));
button.addEventListener("click", myButtonWasClicked);
body.appendChild(button);
}
function myButtonWasClicked(e) {
console.log(e.target); //access to this specific button
}
Привязать событие к родительскому объекту, который уже существует:
$(document).on("click", "selector", function() {
// Your code here
});
В документации jQuery.fn.on
есть хорошее объяснение.
Короче:
Обработчики событий привязаны только к выбранные в данный момент элементы; они должны существовать на странице, когда ваш код делает вызов
.on()
.Таким образом, в следующем примере
#dataTable tbody tr
должен существовать до генерации кода.$("#dataTable tbody tr").on("click", function(event){ console.log($(this).text()); });
Если на страницу вводится новый HTML-код, предпочтительнее использовать делегированные события для присоединения обработчика событий, как описано ниже.
Делегированные события имеют то преимущество, что они могут обрабатывать события от элементов потомков, которые будут добавлены в документ позже. Например, если таблица существует, но строки добавляются динамически с использованием кода, следующее будет обрабатывать ее:
$("#dataTable tbody").on("click", "tr", function(event){ console.log($(this).text()); });
В дополнение к их способности обрабатывать события на дочерних элементах, которые еще не созданы, другим преимуществом делегированных событий является их потенциал для гораздо более низких накладных расходов, когда необходимо контролировать многие элементы. В таблице данных с 1000 строками в
tbody
первый пример кода прикрепляет обработчик к 1000 элементам.Подход с делегированными событиями (второй пример кода) прикрепляет обработчик события только к одному элементу ,
tbody
, и событию нужно только выровнять один уровень (от щелчкаtr
доtbody
).Примечание. Делегированные события не работают для SVG .
tr
на соответствующий селектор, например 'input[type=checkbox]'
, и это будет автоматически обрабатываться для вновь вставленных строк?
– JoeBrockhaus
25 November 2014 в 18:26
Попробуйте использовать .live()
вместо .bind()
; .live()
свяжет .hover
с вашим флажком после выполнения запроса Ajax.