Here is my code, all I want is to remove the class that I clicked.
I don't understand why it does not works, I tried both
$(document).ready(function(){
$(".start").on("click", function(){
$(this).removeClass("start");
return false;
});
});
and
$(document).ready(function(){
$(".start").click( function(){
$(this).removeClass("start");
return false;
});
});
index.php
in a while loop, I have
<li>Name </li>
As the elements are created in while loop may be your class='start' element remains undetected. Try this..
$(document).ready(function(){
$(document).on('click','.start',function(){
$(this).removeClass("start");
return false;
});
});
You may have forgotten to add reference of jquery...
This works fine here:
$(document).ready(function(){
$(".start").on("click", function(){
$(this).removeClass("start");
});
});
.start
{
color:black;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>Name </li>
add jquery library to your code
visit jsfiddle http://jsfiddle.net/Jf8mp/15/jsfiddle
$(document).ready(function(){
$(document).on('click','.start',function(){
$(this).removeClass("start");
return false;
});
});
follow this also
Related
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/
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.
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;
}
In your JSFiddle, you forgot to load JQuery framework.
You don't need script tag in JSFiddle (no need and ).
I want to affect the background-color of any item on my page when it is clicked. How can i do this without using id names? I've tried using this as you can see below but it doesn't seem to be working.
$(document).click(function() {
$(this).css({'background-color': 'blue'});
});
Any help always appreciated. Thanks
This should work:
$(document).click(function(event) {
$(event.target).css({'background-color': 'blue'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>DIV</div>
<span>SPAN</span>
Why not look at event.target?
document.addEventListener('click', function (e) {
e.target.style['background-color'] = 'blue';
});
I found this on one of the subjects:
http://jsfiddle.net/GHzfD/357/
I would like to ask how to alert(path) after choose the image from drop list.
<script>
$("body select").msDropDown();
alert(???)
</script>
Try this:
$(document).ready(function(){
$("body select").msDropDown();
$("#webmenu").change(function(){
alert($("#webmenu option:selected").attr('title'));
});
});
Working fiddle: http://jsfiddle.net/robertrozas/GHzfD/629/
Add an event handler to the msDropDown initialization parameters.
$("body select").msDropDown({
on: {
change: function(data, ui) {
alert(data.image);
}
}
});
Here: http://jsfiddle.net/GHzfD/630/
$("#webmenu").change(function(){
alert($(this).find("option:selected").attr("title"));
});
I wanna get selected id from my tabs. I tried anything but but I am very weak in javascript. This my tabs.
<li>Pondelok</li>
<li>Utorok</li>
<li>Streda</li>
<li>Štvrtok</li>
<li>Piatok</li>
<li>Sobota</li>
<li>Nedeľa</li>
This is my attempt, which return undefined.
<script>
var selected_tab = $(".ui-state-active").attr("id");
document.write(selected_tab);
</script>
this will alert id of tab on which you have clicked
$('.days').click(function(){
alert($(this).attr('id'));
});
if you want to write it on document use this
$('.days').click(function(){
document.write($(this).attr('id'));
});
Live Demo
http://jsfiddle.net/zgDYZ/
<script>
var selecId = "";
$('.days').click(function(){
selecId = $(this).attr('id');
});
</script>
Use selecId where ever you want..
Your are trying to to get attribute from class .ui-state-active which doesn't exist as per your markup. So your code wont work:
Try the below and this will work:
$(function() {
$("ul li").each(function() {
var selected_tab = $(this).find("a").attr("id");
alert(selected_tab);
})
});
<script type="text/javascript">
$(document).ready(function () {
$('.days').click(function () {
alert($(this).attr('id'));
});
});
</script>
another best way with validations
$('a.days').click(function(){
alert($(this).attr('id'));
});
I am using the code below where it toggles between 2 div's.
My problem is that I'm using a checkbox to trigger the toggle.
What I need is that...
If the checkbox is NOT check and the user checks it ... then it toggles but if the checkbox is already checked then do not toggle.
Is this possible at all?
Current code is below:
<script type="text/javascript">
$(function(){
$('.togglelink').click(function(){
$('#one').toggle();
$('#two').toggle();
});
});
</script>
What about adding that ?
$('.togglelink').click(function(){
if($(this).attr('checked')) {
return false;
}else{
$('#one').toggle();
$('#two').toggle();
}
});
<script type="text/javascript">
$(function(){
$('.togglelink').click(function(){ if (!($('.togglelink').attr('checked'))) {
$('#one').toggle();
$('#two').toggle();
}
});
});