Динамический элемент не может выбрать остальную часть DOM?

Question

У меня есть кнопка, которая динамически добавляется через jquery. Кнопка существует в каждой строке моей таблицы, и теперь мне нужно добавить к ним функциональность. Проблема в том, что я не могу выбрать родителей моей динамически добавленной кнопки!

Я пытался использовать jquery, чтобы получить текст четвертого родителя кнопки, это возвращает большую ошибку jquery, указывающую, что я сломал все.

var result = $(this).parents().eq(3).text;
alert(result);

эта функция вызывается через это:

$(document).on('click','#addcommentbtn',function(){
addcomment();
});    

Текст, который я пытаюсь получить, находится на четыре шага над кнопкой, поэтому я использую .parents (). Eq (3), чтобы выделить его, но по какой-то причине он не работает. Есть идеи?

Answer 1

$ (this) в вашей функции addcomment () не является элементом #addcommentbtn. Так что либо вам нужно передать this в качестве аргумента addcomment и использовать его как в моем примере ниже

function changeColor(thisRef) {
	$(thisRef).parent().addClass("alt");
}

// handle click and add class
$("button").on("click", function(){
  changeColor(this);
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  width: 300px;
}

button {
  background: #0084ff;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>