Check Radio Input From Click on Parent (jquery/DOM)

I need to check a radio button when the user clicks anywhere in the parent li. The ul is in the original html but the li and radio button are rendered to the DOM in a for loop inside a function below (displaySearchResults(responseJson).

I have only been able to get a console.log out of the event listener for clicking the li when I target the class that is on each appended li, .results-list-item.

Changing the target for the event listener to the ul or an li inside the ul with various combinations (such as -- $('#results-list ul > .results-list-item').click ) all prevent the function from running.

Have not been able to apply any change to the radio button for the specific clicked li (sometimes able to change all radio buttons) -- no luck using the this keyword or various class/id/element combinations to target children of the clicked li (at least none I tried).

I would like to move the select() function inside the document ready function, but this prevents the console.logs, even when attempting to target any click in the ul.

Here is the event listener followed by all of the relevant js and the html at the bottom.

This has been an absolute nightmare, any help is appreciated. Thanks!

Event listener:  function select(){  $('.results-list-item').click(event => {   let name = $(this)  console.log('li click')  console.log('name', name)   })   };  

here name console.logs as undefined, I don't understand the result that comes from logging this keyword - it is an object but it does not look like the li

various attempts at marking the child radio button as checked

$(this).closest($('input')).prop("checked", true)  $(this).children($('input')).attr('checked','true')  $('.results-list-item').children($('input.radio')).attr('checked','')  

FETCH TO API

seems to be working fine

function startSearch() {    updateSearch();    fetch here is working ok       .then(response => response.json())      .then(responseJson => {        displaySearchResults(responseJson)        })      .catch(error => console.log(error));  }  

DISPLAY RESULTS

display results seems to be working fine, populates ul with 10 lis from the fetch results

function displaySearchResults(responseJson) {       for (let i = 0; i < 10; i++){        $('#results-list').append(        `        <li class='results-list-item'>        <h3>${results[i].name}</h3>         <input type='radio' id='${results[i].name}' value='${responseJson.results[i].id}' required>       </li>        `        )      }    select()  }  

EVENT LISTENERS

function select(){  $('.results-list-item').click(event => {   let name = $(this)  console.log('li click')  console.log('name', name)   })   };    $(function() {    watchSearchForm();    watchResultsForm();      // select()  });  

HTML

<main class='container'>  <section id='results'>  <form id='js-results-form'>  <ul id='results-list'>  </ul>  <input type='submit' value='Select Game'></input>  </form>  </section>  </main>  

https://stackoverflow.com/questions/66609074/check-radio-input-from-click-on-parent-jquery-dom March 13, 2021 at 08:54AM