We Keep Coding

Additional wrong event being triggered when using bootstrap collpase button

I am using Bootstrap 5.2 and I have two buttons that can hide content, using the Bootstrap collapse plugin.
<div class="col-12 col-sm-auto">
<span class="pe-2">
<button id="show_movements_button" type="btn" class="btn btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#movements_id">
Show Movements
</button>
</span>
<span class="pe-2">
<button id="show_credits_button" type="btn" class="btn btn-outline-secondary" data-bs-toggle="collapse" data-bs-target="#credits_id">
Show All Credits
</button>
</span>
</div>
such as
<tr class="song_id collapse" id="movements_id">
<td class="col-1">
1
</td>
<td class="col">
</td>
<td class="col">
<div>
<label class="h6">
Piano Concerto no. 1 in E minor, op. 11: I. Allegro maestoso
</label>
</div>
<div class="collapse" id="credits_id">
<div class="lh-1">
<div>
<a href="/container.start?cid=0$=Instrument$708&title=Instruments+%2F+piano" class="small text-secondary">
piano
</a>
<label class="small">
by
</label>
<a href="/container.start?cid=0$=Performer_name$5540&title=Performers+%2F+Evgeny+Kissin" class="small text-secondary pe-1">
Evgeny Kissin
</a>
</div>
</div>
</div>
</td>
</tr>
This work correctly, but I want the name of the button to change to indicate if showing or hiding content so I also have this code
<script>
function listenForButtonCollapse(buttonId, collapseId, buttonShowText, buttonHideText)
{
let button = document.getElementById(buttonId);
let section = document.getElementById(collapseId);
if(section!=null)
{
section.addEventListener('show.bs.collapse',
function()
{
button.innerText=buttonHideText;
}
);
section.addEventListener('hide.bs.collapse',
function()
{
button.innerText=buttonShowText;
}
);
}
}
</script>
<script>
listenForButtonCollapse('show_credits_button','credits_id','Show All Credits','Hide Some Credits');
</script>
<script>
listenForButtonCollapse('show_movements_button','movements_id','Show Movements','Hide Movements');
</script>
Now toggling the Show/Hide Movements button works fine, but when I click on the Show/Hide Credits button for some reason it is also triggering the listenForButtonCollapse() call on the movements button as well as the credits button, so the Movement button is updated with the same (Hide/Show) value as the credits button even though it isn't actually been invoked (so it doesn't hide/show the movements div)
The credits div is within the movements div, so Im assuming that why one button works without problem and the other doesn't but I cant see what I am actually doing wrong.

In order to avoid the current behaviour you need to stop further event propagation. You can do this by using stopPropagation(). This method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
function listenForButtonCollapse(buttonId, collapseId, buttonShowText, buttonHideText)
{
let button = document.getElementById(buttonId);
let section = document.getElementById(collapseId);
if (section != null)
{
section.addEventListener('show.bs.collapse',
function(event)
{
event.stopPropagation();
button.innerText=buttonHideText;
}
);
section.addEventListener('hide.bs.collapse',
function(event)
{
event.stopPropagation();
button.innerText=buttonShowText;
}
);
}
}
I've prepared a Code playground to illustrate that this solves your issue:
https://codesandbox.io/embed/bootstrap-5-playground-forked-b28j0g?fontsize=14&hidenavigation=1&theme=dark
Solution Explanation
The events show.bs.collapse and hide.bs.collapse are being triggered for both buttons when clicked. So when you add more than one event listener for those events, when the event occurs, all event listeners are being executed. This is why for example when you click "Hide Movements" and bootstrap triggers hide.bs.collapse
event then this executes all registered event listeners for it - in this case two - one for the show_credits_button and another for show_movements_button button - leading to changing both button texts. To prevent this you need to stop further event propagation with event.stopPropagation() method - this will stop notifying all other event listeners for this event other than the event target one.

Prevent parent mouseout jQuery event to trigger on child

This is probably a known issue or question. However, I only see results for
Element.on('click', callback)
events and I do not know how to do this with and on 'mouseout' event
This is my HTML:
<div class="oneTodo">
<div class="todoText"></div>
<span class="eraseTodo">
<i class="icon ion-ios-close-outline"></i>
</span>
</div>
And my script:
$('.oneTodo').hover(function () {
$(this).find('.eraseTodo').fadeIn(100);
});
$('.oneTodo').on('mouseout', function() { // this is what is not working
$(this).find('.eraseTodo').fadeOut(100);
});
Basically when I hover over my:
<span class="eraseTodo">
<i class="icon ion-ios-close-outline"></i>
</span>
since it basically is not the .oneTodo div anymore it fades Out. I want to prevent this. How can I achieve this?
P.S: I tried:
$('.oneTodo:not(.eraseTodo)').on('mouseout', function() {
$(this).find('.eraseTodo').fadeOut(100);
});
but failed miserably.

jQuery animations conflict

I tried to use jQuery animation to animate a div's content and reset everything to default using a close button. The problem is here that after clicking on close button and resetting everything to default, the first animation starts again.
$(document).ready(function(){
$(".order-b").click(function(){
$(".order-t").animate({top:'30%'}, "slow" );
$(".order-c").animate({opacity: '1', top:'70%'}, "slow" );
$(".order-ca").delay('800').animate({opacity:'1'}, "slow" );
}).clearQueue().stop();
$(".order-c").click(function(){
$(".order-ca").animate({opacity:'0'}, "fast" );
$(".order-t").delay('800').animate({top:'52%'}, "slow" );
$(".order-c").delay('800').animate({opacity: '0', top:'70%'}, "slow" );
});
});
<div class="process-bars">
<div class="process-bar order-b">
<div class="process-title order-t">
<i class="fa fa-shopping-cart"></i>
<h1>Order</h1>
</div>
<div class="process-caption order-ca">
<p>Text</p>
</div>
<div class="process-close order-c">
<i class="fa fa-times-circle"></i>
</div>
</div>
</div>
What am I doing wrong?!

The class .order-b is within the class .order-c so the event click will always trigger on click into the div .
You have to use http://api.jquery.com/event.stoppropagation/

Your div with the class
"process-bar order-b"
is the parent div from
"process-close order-c"
So your "click"-event from the order-b also fires, if you klick at the order-c.
You have to put that child with the class order-c outside. not in the div with the class "order-b".

jQuery click event only working in landscape(iPad)

I have a click event that only works when I have my iPad in landscape but when I turn it to portrait, it stops working. Can anyone tell me why?
<div id="home_page">
<div class="full">
<button class="button" id="func_checks">Functional Checks</button>
</div>
</div>
$(document).ready(function(){
$("#func_checks").on("click touchstart", function(){
$("#header").append("<h1>G-IV Functional Checks</h1>");
$("#home_page").hide();
$(".return").show();
$("#checks_page").show();
})
})

Modify click handler to:
$("#func_checks").on("click touchstart", function(){
$("#header").append("<h1>G-IV Functional Checks</h1>");
$("#home_page").hide();
$(".return").show();
$("#checks_page").show();
});

jQuery .not not functioning correctly

I'm having a problem with jQuery .not() not working.
I've got a pricing table with 3 products, when you mouse over each of the products a description appears and then disappears on mouse out so far everything works fine.
The problem however is that on page load one of the three products (each held in an <aside>) will have a .selected class applied to it and I need the mouseenter/leave function to not run on this <aside>.
The only caveat is that clicking any of the <button>'s in each <aside> will remove the .selected class from it's current <aside> and apply to the <button>'s <aside> parent (I've not included the JQ for this as it's just a dead simple .addClass).
Code example of what I currently have is below, thanks in advanced.
jQuery
$(".pricing3 aside").not('.selected').mouseenter(function() {
$(".desc", this).stop().slideDown('slow');
})
.mouseleave(function() {
$(".desc", this).stop().slideUp('slow');
});
HTML
<div class="pricing3">
<aside>
<i class="fa fa-clock-o"></i>
<h3>1 Hour Pass</h3>
<p class="desc">Description</p>
<p class="pricing">£XX</p>
<button type="submit">BUY NOW</button>
</aside>
<aside class="selected">
<i class="fa fa-clock-o"></i>
<h3>8 Hour Pass</h3>
<p class="desc">Description</p>
<p class="pricing">£XX</p>
<button type="submit">BUY NOW</button>
</aside>
<aside>
<i class="fa fa-clock-o"></i>
<h3>24-7-365 Access</h3>
<p class="desc">Description</p>
<p class="pricing">£XX</p>
<button type="submit">BUY NOW</button>
</aside>
</div>

Need to use event delegation as the target element selection is based on a dynamic state
$(".pricing3").on('mouseenter', 'aside:not(.selected)', function () {
$(".desc", this).stop().slideDown('slow');
}).on('mouseleave', 'aside:not(.selected)', function () {
$(".desc", this).stop().slideUp('slow');
});
It can be written slightly differently as
$(".pricing3").on({
mouseenter: function () {
$(".desc", this).stop().slideDown('slow');
},
mouseleave: function () {
$(".desc", this).stop().slideUp('slow');
}
}, 'aside:not(.selected)')

As the class is shifting you'd be better off checking for the class inside the event handler
$(".pricing3 aside").on('mouseenter mouseleave', function() {
if ( !$(this).hasClass('selected') ) {
$(".desc", this).stop().slideToggle('slow');
}
});

If I understand you correctly, the problem is that you want the .selected to be removed, and then the mouseenter() to run on it as if it hadn't had the .selected on it in the first place?
If this is the case, you should attach your event handler higher up the DOM tree, and use on() to filter down to the <aside>s This way you can flip/flop the class all you want, and the event handler will work as expected. As it's coded, you are only applying the filter at page load, so the state change of the class has no effect.