Как получить идентификатор элемента класса селектора в jquery on ()

Question

Итак, я хорошо знаю, что могу получить идентификатор элемента, подобного этому:

$('.class').on('click', () => {
  console.log(this.id);
  //this gets the id
});

$('.class').on('click', (e) => {
  console.log(e.target.id);
  //this gets the id as well
});

Проблема, с которой я здесь сталкиваюсь, заключается в том, что функции javascript не работают на моем DOM, когда я вводил HTML с javascript с $('someDiv).append("<div id='someId'></div>")

Так что единственный способ (по крайней мере, насколько мне известно) заставить его работать, это сделать:

$(document).on('click', '.class', (event) => {
  console.log(event.target.id);
  //and this prints undefined
});

Я получаю undefined, поскольку this относится к document, а не к фактическому div, на который я нажимал.

Редактировать: я вижу, что между function() и ()=>{} есть разница попробовал это также:

$(document).on('click', '.class', function (e) {
  console.log(e.target.id);
  //and I still get a blank output
});

Я не могу вызвать $('.class').on('click') напрямую, так как HTML вводится с javascript, как упомянуто выше. Поэтому я вынужден использовать '.class' в качестве селектора в функции $(document).on('click') следующим образом. Проблема в том, что вызванное событие показывает, что document является целью, но не селектором, поэтому я получу документ только тогда, когда сделаю event.target, таким образом, ничего не получая от event.target.id.

Редактировать 2: использование события не работает, но this возвращает элемент, на который я нажимаю, чтобы я мог получить его идентификатор с помощью this.id

Answer 1

Одно из различий между функцией стрелки (() => {}) и обычной function заключается в том, что у обычной function есть собственный контекст, а у стрелки - нет. Вместо этого при использовании this в функции стрелки функция стрелки будет использовать область видимости своего родителя.

Рассмотрим следующий пример, в котором мы создаем одну обычную function и функцию стрелки и пытаемся ограничить В этом контексте { name: 'Steve' }

// Create context
const context = { name: 'Steve' };

const fn1 = function () {
  // Will print Steve, as this function will have its own context and is now bound to context we created.
  console.log(this.name)
}

const fn2 = () => {
  // This function does not have its own context, and will use the scope of the parent. In this case `window`. So, the function will log `window.name` instead.
  console.log(this.name)
}

fn1.call(context)
fn2.call(context)

Для решения вашей проблемы вы можете использовать тот же принцип. Используйте обычную функцию вместо функции стрелки. Пример:

Имеется следующее html:

<div id="id_1" class="class_1">Div #1</div>
<div id="id_2" class="class_2">Div #2</div>

И jQuery:

$('.class_1').on('click', () => {
  // This will be in the window context and log undefined (window.id)
  console.log(this.id);
});

$('.class_2').on('click', function() {
  // This will be bound to the jQuery context and log the element's id
  console.log(this.id);
});

Это должно решить вашу проблему. Живой пример здесь, если вы хотите попробовать для себя https://jsbin.com/wojipuloti/edit?html, js, консоль, вывод

Answer 2

I found it syntactically wrong, it should be, 
$('.class').on('click', (e) => {
  console.log(e.target.id);
  //this gets the id as well
});
You forgot to close quotes in $('.class'). Also in $('someDiv).append("<div></div>") you need to close quotes and try after this.


$(document).on('click', '.class', (event) => {
  console.log(event.target.id);
  //and this prints undefined
}); 

когда происходит событие щелчка, обработчик щелчка должен напечатать идентификатор элемента, по которому щелкнули. Согласно вашему коду,

$('someDiv).append("<div></div>")

вы не определяете какой-либо идентификатор элемента. Вы можете попробовать после добавления id на элемент, он будет работать.