make list clickable (jquery/html)

Question

I'm using python flask with my site to display content from a database, and I'm trying to make each list item clickable. I've looked at various questions on stackoverflow about how to make a list item clickable, which I can do, but only the first list item in this list is clickable, and the rest do nothing. Can someone please show me what I'm doing wrong? This is my first time doing html/js/jquery stuff so I'm confused.

HTML code:

<ul id="listing-list">
    {% for listing in listings %} <!-- For loop puts all results in the columns-->
        <li>
            <div id="listing">

                <input type="hidden" class="id_align" name="id_align" value="{{ listing.id }}">

                <div id="name-address">
                    <div id="listing-name">{{ listing.listing_name }}</div>
                    <div id="listing-address">{{ listing.address }}</div>

                    <div id="room-bath">
                        <span id="listing-rooms">{{ listing.rooms }} bed</span>
                        &nbsp;&nbsp;&middot;&nbsp;&nbsp;
                        <span id="listing-bath">{{ listing.bathrooms }} bath</span>
                    </div>

                    <div id="listing-comments"><br>Comments: {{ listing.comments }}</div>
                </div>
                <div id="listing-price">${{ listing.price }}</div>
            </div>
        </li>
    {% endfor %}
</ul>

JQuery code:

$( "#listing" ).click(function() {
    var list_id = $( ".id_align" ).val();
    //alert(list_id);
    var location = "/create_review/" + list_id;
    //alert('' + location);
    window.location.href = location;
});

You are looping through your list assigning the same id to the div inside de <li> element. Try to do this with a class instead and change your selector to $('.listing') — wilsotobianco
– wilsotobianco, Commented Feb 28, 2016 at 5:52

dreamweiver · Accepted Answer · 2016-02-28 06:05:58Z

2

ID should be unique , in your case, its repeating for mulitple elements hence the click event handler is triggered only for the first item in the DOM with this ID listing.

So,Use class selector instead.

Also to extract the id_align value of the current clicked list item you need to traverse within the clicked item , you can do that calling .find() against the current item else it will always give you the first .id_align() field value always.

HTML Code:

 <div class="listing">

JS Code:

$( ".listing" ).click(function() {
   var list_id = $(this).find(".id_align" ).val(); // to fetch current current id_align
   var location = "/create_review/" + list_id;
  window.location.href = location;
});

edited Feb 28, 2016 at 6:05

answered Feb 28, 2016 at 5:55

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

googlygoogly2 Over a year ago

That fixed it, thank you! What does the find() function do exactly? Just goes through all the listing elements?

dreamweiver Over a year ago

.find() searches through the descendants of the clicked li item to find the element based the selector expression provided, like in your case id_align class. you can know more about it here ,api.jquery.com/find

wilsotobianco · Accepted Answer · 2016-02-28 05:58:06Z

I'm guessing the error is that you looping through your list creating N divs dynamically and assigning them the same id. Remember elements's ids in HTML most be document-wide unique (you can read the specifications here)

So, to fix this you may end with something like this:

<ul id="listing-list">
    {% for listing in listings %} <!-- For loop puts all results in the columns-->
        <li>
            <div class="listing"> <!-- class assignment instead of id -->

                <input type="hidden" class="id_align" name="id_align" value="{{ listing.id }}">

                <div id="name-address">
                    <div id="listing-name">{{ listing.listing_name }}</div>
                    <div id="listing-address">{{ listing.address }}</div>

                    <div id="room-bath">
                        <span id="listing-rooms">{{ listing.rooms }} bed</span>
                        &nbsp;&nbsp;&middot;&nbsp;&nbsp;
                        <span id="listing-bath">{{ listing.bathrooms }} bath</span>
                    </div>

                    <div id="listing-comments"><br>Comments: {{ listing.comments }}</div>
                </div>
                <div id="listing-price">${{ listing.price }}</div>
            </div>
        </li>
    {% endfor %}

And your javascript code

$( ".listing" ).click(function() {
    var list_id = $( ".id_align" ).val();
    //alert(list_id);
    var location = "/create_review/" + list_id;
    //alert('' + location);
    window.location.href = location;
});

Nikolay Ermakov · Accepted Answer · 2016-02-28 06:01:45Z

0

In your iteration you are adding items with same id, therefore it stops on the first item. Use class listing instead of id listing:

    <ul id="listing-list">
    {% for listing in listings %} <!-- For loop puts all results in the columns-->
        <li>
            <div class="listing">
    ...

$( ".listing" ).click(function() {
    var list_id = $(this).find(".id_align").first().val();
    //alert(list_id);
    var location = "/create_review/" + list_id;
    //alert('' + location);
    window.location.href = location;
});

edited Feb 28, 2016 at 6:01

answered Feb 28, 2016 at 5:54

Nikolay Ermakov

5,0712 gold badges14 silver badges19 bronze badges

Collectives™ on Stack Overflow

make list clickable (jquery/html)

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related