Кнопка возврата ID вопрос JQuery

Question

Я пытаюсь вернуть мою кнопку ID:

$(document).on('click', 'button.btn.btn-primary', function() { 
    console.log(this.id); 
}); 

Однако это возвращает undefined. Когда я попробовал console.log(this), я возвращаю объект окна. Я не вижу этого поведения с моими другими кнопками, что я возвращаю id .. может кто-нибудь помочь?

Вот мой HTML:

<tr class="child"> 
    <td class="child" colspan="8"> 
     <li data-dtr-offset-index-"7"> 
      <span class="dtr-title"></span> 
      <span class="dtr-data"> 
       <button id="{{product_code}}" type="button" class="btn btn-primary">Add to Cart</button> 
      </span> 
     </li> 
    </td> 
</tr> 

Дополнительный контекст:

Я использую JQuery DataTables. Вышеуказанный html отображается, когда таблица находится в режиме реагирования. Спасибо заранее!

Answer 1

Вы должны добавить его в OnLoad конструкции поэтому кнопка существует

Пожалуйста, обратите внимание, что все размещенные jsfiddle примеры имеют по умолчанию onload вместо in head

$(function() { 
 
    $(document).on('click', 'button.btn.btn-primary', function() { 
 
    console.log(this.id); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<tr class="child"> 
 
    <td class="child" colspan="8"> 
 
    <li data-dtr-offset-index- "7"> 
 
     <span class="dtr-title"></span> 
 
     <span class="dtr-data"> 
 
       <button id="{{product_code}}" type="button" class="btn btn-primary">Add to Cart</button> 
 
      </span> 
 
    </li> 
 
    </td> 
 
</tr>

Answer 2

Вы попробовали решение jQuery?

$(document).on('click', 'button.btn.btn-primary', function() { 
    console.log($(this).attr('id')); 
}); 

Answer 3

https://jsfiddle.net/yt22yq8h/

$(document).on('click', 'button.btn.btn-primary', function() { 
    console.log(this.id); 
}); 

Это прекрасно работает для меня. Посмотрите на приведенную выше скрипку. Она показывает идентификатор в консоли.