All geek questions in one place

Jquery on click event does not work on list items in unordered list

I have the following list with an unordered list with id # sortable1, which I want to achieve - whenever the li element is clicked with <ul id = "sortable2"> the onclick event should occur and alert the id from the li element that was clicked. I have one element also in an unordered list that cannot be clicked with class = "emptyMessage"

I'm stuck and don't know how to act

I still have

<ul id="sortable1" class="connectedSortable ui-sortable">
<li class="ui-state-default" id="1">Name1</li>
<li class="ui-state-default" id="2">Name2</li>
<li class="ui-state-default" id="3">Name3</li>
<li class="ui-state-default" id="4">Name4</li>
<li class="ui-state-default" id="5">Name5</li>
<li style="display: list-item;" class="emptyMessage">No more contacts available</li></ul>

My jquery code

$("#sortable1 li").click(function() {
          alert('Clicked list.'+$(this).value);
         });
+3
source share
5 answers

This should do it:

$("#sortable1 li").not('.emptyMessage').click(function() {
       alert('Clicked list. ' + this.id);
});

Demo: http://www.jsfiddle.net/gztRq/2/

+11
source 
$("#sortable1 > li.ui-state-default").click(function() {
    alert("Clicked list " + $(this).attr("id"));
});
+2
source

JavaScript . :

$("#sortable1 li").click(function() {
    alert("Clicked list." + $(this).value);
});

, , $(this).html(), $(this).value - <li> ( .val() jQuery).

.

0
source

Maybe the wrong selector? Here is my code (works fine):

<html>
    <head>
        <title>MooExample</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#sortable1 > li").click(function() {
                    alert($(this).html());
                });
            });
        </script>
    </head>

    <body>
        <ul id="sortable1" class="connectedSortable ui-sortable">
            <li class="ui-state-default" id="1">Name1</li>
            <li class="ui-state-default" id="2">Name2</li>
            <li class="ui-state-default" id="3">Name3</li>
            <li class="ui-state-default" id="4">Name4</li>
            <li class="ui-state-default" id="5">Name5</li>
        </ul>
    </body>
</html>

UPD: Sorry, I think the elements <li>do not have the val () =) property

0
source

use this to be more specific when choosing

$(document).ready(function () {
    $("ul#sortable1 li").click(function() {
    alert("Clicked list." + $(this).text());
});
});
0
source

Source: https://habr.com/ru/post/1785605/

More articles:


All Articles