Click list-group-item from a returned list-group #WikipediaViewer

Hi Guys,

I have a piece of code: https://codepen.io/RyzorBent/pen/LLEGrM?editors=1111 which achieves what I’m aiming for. but when i include this code in my Wikipedia project https://codepen.io/RyzorBent/pen/dRbgGG?editors=1011 it fails.

I can get the json data back from the Wikipedia api, and display it as a list … the problem starts when i try clicking the individual

  • … there is no repnse from within jquery! … strange thing is that a similar code works in the codepan that i included above.

    jquery

    $(".list-group li").hover(function(e) {
        e.preventDefault();
        console.log("...clicked...hover..");
        $that = $(this);
    
        $that.parent().find("li").removeClass("active");
        $that.addClass("active");
      });
    
      $(".list-group li").mouseleave(function(e) {
        $that.parent().find("li").removeClass("active");
      });
    

    associated html

    <div >
      <ul class="list-group">
      </ul>
      </div>
    
  • You are trying to bind hover and mouseleave events on document ready on li’s that doesn’t exist yet since you create them once you have a successful response of the wikipedia API. I suggest creating a function that binds these events once the li’s HTML is appended into the ul.

    Eish, I’ve been falling at the same ditch of asynchronous logical errors. Thank you very much Gihdz, its now working. the bind needed to be done once I’ve formed the HTML string.

    1 Like

    Hi Ghdz,

    i’ve completed the my Wikipedia project … if you have time you can check it out here: https://codepen.io/RyzorBent/pen/dRbgGG?editors=0010

    Nice! Looks fine! :slight_smile:

    Thank you!! :slight_smile: