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

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

#1

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>
    

  • #2

    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.


    #3

    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.


    #4

    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


    #5

    Nice! Looks fine! :slight_smile:


    #6

    Thank you!! :slight_smile: