I want to get the value of hidden hidden by jQuery in the framework of the proposed listener. The script below gives undefined. Where is the mistake?

$('.mdl-list__item').click(function (point) { var distrib = $(point).children('.name').val(); console.log(distrib); // undefined }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <li class="mdl-list__item"> <span class="mdl-list__item-primary-content"> <i class="material-icons mdl-list__item-icon"> local_cafe </i> <span class="mdl-badge" data-badge="0"> Пивоварня 3 </span> </span> <input type="hidden" class='name' value="beer3"> </li>

    2 answers 2

    When clicked, point is an event of the current object, there is no children method in it. You can get the current jquery element in $(this)

     $(this).children('.name').val();

    jquery

     $('.mdl-list__item').click(function(point) { var distrib = $(this).find('input').val(); console.log(distrib); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"> </script> <li class="mdl-list__item"> <span class="mdl-list__item-primary-content"> <i class="material-icons mdl-list__item-icon">local_cafe</i> <span class="mdl-badge" data-badge="0">Пивоварня 3</span> </span> <input type="hidden" class='name' value="beer3"> </li>

    javascript

     function f(e) { distrib = e.querySelector('input').value; console.log(distrib); } 
     <li class="mdl-list__item" onclick='f(this)'> <span class="mdl-list__item-primary-content"> <i class="material-icons mdl-list__item-icon">local_cafe</i> <span class="mdl-badge" data-badge="0">Пивоварня 3</span> </span> <input type="hidden" class='name' value="beer3"> </li>

    • specify why in assigning the variable $ this? - Vyacheslav Potseluyko
    • one
      @VyacheslavPotseluyko, the element that clicked $('.mdl-list__item') - Mr. Black
    • thanks and for clean). And is there an option with the absence of "blots" of pure js in html? It's just that in the project itself (php) these are two different files, and the concept consists precisely in the complete separation of the code .. - Vyacheslav Potseluyko
    • one
      @VyacheslavPotseluyko, document.querySelector('.mdl-list__item').onclick = function() { console.log(this.querySelector('input').value); } document.querySelector('.mdl-list__item').onclick = function() { console.log(this.querySelector('input').value); } - Mr. Black

    It is worth referring to the help function click

    It describes the parameter handler

    handler
    Type: Function (Event eventObject)
    A function to execute each time the event is triggered.

    Thus, it is clear that the parameter for a callback is an Event object, and not the element that was clicked.

    Therefore, using $ (point) .children on it will return an empty collection.

    In jQuery handlers, as a rule, this set to the current element, so you need to use it, or event.target , if there are no nested elements.

    • You can display event in the console and see that it contains console.log(event) - Mr. Black
    • @Doofy, did not understand the comment - Grundy
    • This is for Vyacheslav) - Mr. Black
    • @Doofy, yes, looked interesting. At the same time, the option with $ (this) .children also works for me ... That doesn’t seem to contradict your comments - Vyacheslav Potseluyko
    • one
      @VyacheslavPotseluyko, the difference between children From find is that the first function looks only at direct children, at the first level, and the second at all levels, since here the input lies directly in the container - there can be no difference in the result - Grundy