jQuery loses added class [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have several buttons with a class mybtn. I need to set a class mybtn-active on the one that is clicked, and remove it from the one that has it at the moment.
$('.mybtn').on('click', function () {
$('.mybtn-active').removeClass('mybtn-active');
$(this).addClass('mybtn-active');
});
When I click on a button, currently active loses its class, as it should. But the clicked one doesn't get the class.
I passed through the script with Chrome debugger and it works. It just loses the class when the code exits the script. Any ideas?
[SOLUTION] by #musefan
The buttons were <a> tags in the background, which I didn't think about because this is the code I inherited, I didn't write the HTML. And that was the problem. See the accepted answer.

Assumptions
I am going to take a massive gamble here, but it's the only thing I can think of that would explain what the OP is describing and could actually happen with that code. We would need the OP to provide HTML to validate my assumption.
I am also assuming that the class selector in the sample code is a typo of the question, and is not a problem in the original code (as the OP specifically says the removal of the classes is working correctly).
My assumptions have since been validated by the OP in comments on this answer and other answers.
Problem
I expect your problem is that you are using either a elements and your click is actually reloading the page, or using buttons that are also having the same effect, thus causing all classes to revert to default.
Solution
You can fix this by using the arguments of the click event as follows:
$('.mybtn').on('click', function (e) {
e.preventDefault(); // This prevent the hyperlink from reloading the page.
$('.mybtn-active').removeClass('mybtn-active');
$(this).addClass('mybtn-active');
});

You are missing a
.
in the selector on your second line.
It should be
$('.mybtn-active').removeClass('mybtn-active');

As I have mentioned in the comment, it is typo mistake. You have to change $('mybtn-active') to $('.mybtn-active'). Look at the snippet.
$('.mybtn').on('click', function () {
$('.mybtn-active').removeClass('mybtn-active');
$(this).addClass('mybtn-active');
});
.mybtn-active {
font-size:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="mybtn">Button1</button>
<button class="mybtn">Button2</button>
<button class="mybtn">Button3</button>
<button class="mybtn">Button4</button>

Related

function to fire on button [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have button with id = btnadd And java script file “myscript” which is referenced in layout page.
I want this function to fire on button click but this doesn’t happen. Could anybody tell me what is the error here?
View script like this:
myscript java script file like this:
Use this code instead:
$(document).on("click", "#btnaddd", function() {
alert("click");
});
If it still does not work then you might have used the same ID btnadd for two different elements and JQUERY only matches the first one.
Maybe multiple elementes with de same id, you can see this code at jsfiddle.
$(document).ready(function() {
$('#mybt').click(function(){
alert('s')
})
});

Why won't my delete button work? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have some background in computer programming, but I am just getting into Javascript and jQuery. I have this code that will delete the element's grandparent but the function isn't running at all ("I am not seeing the "alert".) Can you help me find out what is wrong?
NOTE: There are multiple .trashbuttons and I just want the .trashbutton being clicked's grandparent getting deleted.
$("trashbutton").click(function() {
this.parent().parent().remove();
})
EDIT: The answers I have been given are not working. I should also note that the .trashbutton is a img. If that helps.
You have an error in your selector, you forgot the . to select css classes.
And wrap this to $().
try
$(".trashbutton").click(function() {
$(this).parent().parent().remove();
})
I suggests you to keep reading on jQuery and javascript, especially this documentation about jquery selector. Your script function properly, except that $("trashbutton") refer to a <trashbutton></trashbutton> tag, that doesnt exist in your code ( i guess ). If you wanted to target an element class with that use $(".trashbutton") or $("#trashbutton") to target an element with this ID :)
Use $(this)...this will represent DOM element but you need jQuery wrapped element.
Try this:
$(".trashbutton").click(function() {
$(this).parent().parent().remove();
})
Edit: As suggested in comments, make sure you have $("trashbutton") as valid selector..I assume you are dealing with classes hence it should be $(".trashbutton")
You should use #trashbutton if it is an id or .trashbutton if it is a class. Also wrap this as $(this).
$("#trashbutton").click(function() {
$(this).parent().parent().remove();
})

onClick add input field [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I want to add a transparent input text field in the centre of DIV #mainC each time the button is clicked.
JsFiddle
I tried doing this with jquery but did not succeed.
use append():
$("#abc").click(function() {
$("#main").append('<input type="text" />');
});
demo: http://jsfiddle.net/6nkd5/5/
Well there's multiple things wrong with your code:
You use the same ID multiple times (ID's can only be used once, classes can be used multiple times).
Calling a function from a external JavaScript source will result in the function not running.
You're trying to use jQuery when jQuery is not loaded
$('<input type="aText" id="aText">').appendTo('#main') is not a valid jQuery, instead try to use: $('#main').append('<input type="text" id="aText">');
aText is not a valid input type attribute value
There is no library selected at the upper left corner in jsfiddle. Try to select jquery there.
Use append() and try not to specify onclick inline. You can register the event with jQuery when document is ready. Registering methods this way is preferred because you separate logic from your HTML (Check unobtrusive javascript).
This is how you would do it preferably:
$('#abc').on('click', function(){
$('#mainC').append('<input type="aText" id="aText">')
})
Check also jsfiddle
The problem you had with your jsFiddle was also that no jQuery script was selected.

Collapsible FAQ with links that jump to and expand other questions

I currently have this code for an FAQ list of questions and answers. The headings, questions and answers are expandable/collapsible on click.
http://jsfiddle.net/7RbCZ/
However, one feature I need is to be able to, within answer text, link to other questions so that the page jumps to and opens up this question.
Currently I have written (line 6 HTML):
(See Question 3)
in the answer to Question 1, and given Question 3 an id (line 18 HTML):
<li class="list-level-2" id="question-3">Question 3?
This is not working but hopefully demonstrates what I want to achieve.
Thanks very much for any help.
Edit: Thanks to marbor3 below. Re:their solution, does any one have any ideas about how to get the page to jump to this question/answer? Also have a problem that if the question linked to is already open then the trigger(click) makes it invisible.
You can catch click event on the link and trigger click event in element which id is in the href
$(".triggerNextQuestion").click(function(event) {
event.preventDefault();
var question = $($(this).attr('href'));
if(!question.parent().is(':visible')) {
question.parent().trigger('click');
}
question.trigger('click');
});
You will need to check if parent is visible also, to show it if it's not.
It's a starting point, sure needs some modifications, like showing question in after parent is shown.
Here's fiddle

one class two onclick functions on one item, can someone help me please [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
i cant get the LcloseNav to work.
heres my code i used.the KclosNav work in this code but the LcoseNav does not, seperately they work but joined seems im doing something wrong here, please help with this.thank you.
<div id="KmySidenav" class="Ksidenav">
&times
</div>
Hi Gareth you should have a function that call both KcloseNav and LcloseNav
then your html should be something like this:
<div id="KmySidenav" class="Ksidenav">
&times
</div>
<script>
function closeNavs() {
KcloseNav();
LcloseNav();
}
</script>
It's better to use eventListener
I would do it this way - Change <a> to a button.
<div id="KmySidenav" class="Ksidenav">
<button type="button" class="Kclosebtn">&times</button>
</div>
Add event listener
document.querySelector('.Kclosebtn').addEventListener('click', (e) => {
KcloseNav();
LcloseNav();
});
Here's explanation:
We are using querySelector to get .Kclosebtn button. Next, we are adding click eventListener. And when someone clicks on it, it will invoke KcloseNav() and LcloseNav() functions

Categories