JQuery and onclick doesn't work in this context

Question

striving to make jquery and li working in this context:

<div id="statLateralMenu">
    <h3>Statistics</h3>

    <ul>
        <li id="id1" class="selected">Stat 1</li>
        <li id="id2">Stat 2</li>
    </ul>
</div>

s

$(function() {
    $("#statLateralMenu li").click(function()
    {
        alert( "A" );
        $("#statLateralMenu li").removeClass("selected");
        $(this).addClass("selected");
    });
}
);

I am pretty sure the error is very stupid also because I've already implemented this code in another area of my page and it works perfectly, but this time really I can't make it working. Any clue please?

EDIT:

I am not able even to fire the alert, my problem is not (yet) to change the class's li. JQuery is loaded as in the same page I have another ul/li complex and it works perfectly

EDIT 2: At this point maybe I am messing up a bit, but using my code here it doesn't work as well: https://jsfiddle.net/nakjyyaj/4/

I am not getting what is the issue here? Can you show a simple demo regarding the issue? — palaѕн, Mar 18 '18 at 16:29
When clicking on any of the "li" I would like to show at least the alert, but I am not able to trigger even the event itself — Soul, Mar 18 '18 at 16:31
It seems working to me. Try to create a [minimal, complete, and verifiable example](http://stackoverflow.com/help/mcve) on https://jsfiddle.net — palaѕн, Mar 18 '18 at 16:33
Ok, to verify if in fact jquery is loaded do a check like this `if (window.jQuery)` and see what you get in the console. — Robert, Mar 18 '18 at 16:41
If jquery is loaded then this has to do with the specificity of your selectors. Maybe you have another element using the same id? — Robert, Mar 18 '18 at 16:46
My guesses would be either there are more than one element with `statLateralMenu` id or the `li` items are being added dynamically after calling this part code. — Brahma Dev, Mar 18 '18 at 16:47
I also try and it is working fine, Could you please share complete code ? — Alpesh Jikadra, Mar 18 '18 at 16:48
The main code is utter huge, but basically I have a main ul-li complex which works fine; through it a change dynamically the content of a div retrieving the content with a server connection with ajax in post method. Everything works fine, except that content there is a new ul/li that I want to make it going without success. — Soul, Mar 18 '18 at 17:01

score 2 · Accepted Answer · 2018-03-18T17:20:50.810

It seems to work :

$(function() {
  $("li").click(function() {
    $("li").removeClass("selected");
    $(this).addClass("selected");
  });
});

.selected{background:yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>azerty</li>
  <li>bzerty</li>
  <li>czerty</li>
</ul>

To deal with dynamic content you can use event delegation :

$(function() {
  $("ul").on("click", "li", function() {
    $("li").removeClass("selected");
    $(this).addClass("selected");
  });
});
setTimeout(function () {
  $("p").remove();
  $("ul").html(""
  + "<li>azerty</li>"
  + "<li>bzerty</li>"
  + "<li>czerty</li>"
  );
}, 1000);

.selected{background:yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Wait 1 second.</p>
<ul></ul>

Further reading : https://stackoverflow.com/a/46251110/1636522.

Just one more information: in this case, working within "$("ul").on("click", "li",...)" if I want to affect another div with #myid outside the ul, how should I do? Using - normally - $("#myid")? — Soul, Mar 18 '18 at 17:26
@Soul Your selector should target the closest parent of the elements that trigger the event, but it could be any of the ancestors. This tutorial may be helpful : https://learn.jquery.com/events/event-delegation/. — , Mar 18 '18 at 17:33

Marius Vuscan · Answer 2 · 2018-03-18T16:40:43.050

0

try to change $("#statLateralMenu li").removeClass("selected"); to

$(this).removeClass("selected");

like that

$(function() {
    $("#statLateralMenu li").click(function()
    {
        alert( "A" );
        $(this).removeClass("selected");
        $(this).addClass("selected");
    });
}
);

but if you want only to change design elements you can use :hover

li:hover { 
    background-color: yellow;
}

edited Mar 18 '18 at 16:40

answered Mar 18 '18 at 16:33

Marius Vuscan

170
1
2
16

but if you want only to change design elements you can use :hover – Marius Vuscan Mar 18 '18 at 16:42

score 0 · Answer 3 · answered Mar 18 '18 at 17:40

0

In your JSFiddle, you forgot to load JQuery framework. You don't need script tag in JSFiddle (no need and ).

answered Mar 18 '18 at 17:40

FRED WILLIAMS ASSAMOI

96
6

JQuery and onclick doesn't work in this context

3 Answers3