This question already has answers here:
Events on dynamically added classes
(4 answers)
Closed 7 years ago.
I was trying to disable a customized checkbox using jquery once the class disabled is added. Below is my code what I tried so far.
$('span').click(function(e){
$(this).toggleClass('active');
});
$('.disabled').click(function(e){
e.stopPropagation();
return false;
});
CSS
span{
width: 16px;
height: 16px;
display: inline-block;
cursor: pointer;
background-color: gray;
}
span.disabled{
cursor: not-allowed;
}
cite.fa-check{
font-size: 14px;
color: #fff;
margin-left: 1px;
display: none;
}
span.active cite.fa-check{
display: inline-block;
}
My event should not worked if I add class disabled to my checkbox. Any help would be appreciated. Thanks in advance.
Working Demo
update code to below . jquery not() selector avoid event on mentioned element. you don't need to use $('.disabled') click event.
see working demo on fiddle
$('span').not('.disabled').click(function(e){
$(this).toggleClass('active');
});
you can use hasClass
you need only this js
$('span').click(function(e){
if($(this).hasClass( "disabled" )==false){
$(this).toggleClass('active');
}
});
check this fiddle
Just check if the clicked element is disabled or no by checking for the class if exists or not
$('span').click(function(e){
if($(this).hasClass("disabled"))
{
return false;
}
else
{
$(this).toggleClass('active');
}
});
$('.disabled').click(function(e){
return false;
e.stopPropagation();
});
Related
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
So, total newbie here when it comes to javascript and PHP but I'm steadily learning. Still, I'm gonna need to ask you guys for some help. I've tried to write a piece of javascript that shows and hides a div with text when a certain button is clicked.
What I'm trying to achieve is the following:
When button A is clicked, it shows text A under it. When button B is clicked, it shows text B under it. When button C is clicked, it doesn't show anything.
I've worked everything out, but once I place it in the php file, the javascript function with the show/hide function doesn't work and the div's are kept on display: none when I click on the corresponding button.
I'm guessing it has to do something with how I'm placing the code in the PHP file, but I can't put my finger on what I'm doing wrong...
I hope someone here can help out! Thank you in advance for your help patience with a newb. :)
HTML:
<div class="option-50">
50ml option selected
</div>
<div class="option-15">
15ml option selected
</div>
<div id="50ml">50ml</div>
<div id="15ml">15ml</div>
<div id="set">set</div>
Javascript:
<script>
$(function() {
$('div').click(function(){
if(this.id == '50ml'){
$('.option-50').show();
$('.option-15').hide();
} else if(this.id == '15ml'){
$('.option-50').hide();
$('.option-15').show();
} else {
$('.option-50').hide();
$('.option-15').hide();
}
})
});
</script>
CSS:
div{
width: 200px;
height: 200px;
background: cornflowerblue;
line-height: 200px;
text-align: center;
margin: 10px;
}
.option-50{
background: red;
display: none;
}
.option-15{
background: green;
display: none;
}
I have used style property to assign display: block display: none to specific node for this purpose, please find below working code snippet and please make sure to import jQuery in your index.html:
$(function() {
$('div').click(function(){
if(this.id == '50ml'){
$('.option-50')[0].style.display = 'block'
$('.option-15')[0].style.display = 'none';
} else if(this.id == '15ml'){
$('.option-50')[0].style.display = 'none';
$('.option-15')[0].style.display = 'block';
} else {
$('.option-50')[0].style.display = 'none';
$('.option-15')[0].style.display = 'none';
}
})
});
div{
width: 200px;
height: 200px;
background: cornflowerblue;
line-height: 200px;
text-align: center;
margin: 10px;
}
.option-50{
background: red;
display: none;
}
.option-15{
background: green;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="option-50">
50ml option selected
</div>
<div class="option-15">
15ml option selected
</div>
<div id="50ml">50ml</div>
<div id="15ml">15ml</div>
<div id="set">set</div>
You will need to put the Javascript in script tags
<script>
$(function() {
$('div').click(function(){
if(this.id == '50ml'){
$('.option-50').show();
$('.option-15').hide();
} else if(this.id == '15ml'){
$('.option-50').hide();
$('.option-15').show();
} else {
$('.option-50').hide();
$('.option-15').hide();
}
})
});
</script>
I am hiding a div when user hover over one of the menu element. I am using this code for this purpose
jQuery("#menu-item-15").hover(function(){
jQuery(".bootom-menu").css("display", "none");
});
But i want to display bootom-menu div when user will not be hovering (un-hover) over this specific menu element.
This code is working for me finally. Here is the reference link from where i get idea about this. jquery un-hover
jQuery(function(){
jQuery("#menu-item-15").hover(function(){
jQuery(".bootom-menu").css("display", "none");
}, function(){
// change back
jQuery(".bootom-menu").css("display", "block");
});
});
This code is working perfectly for me.
Simply use CSS if you're targeting a child or next-sibling element
#menu-item-15:hover .bootom-menu{
display: none;
}
Just use toggle:
html
<div id='menu_element'>MENU ELEMENT</div><br><br><br><div id='bottom_menu'>BOTTOM MENU DIV</div>
css
#menu_element, #bottom_menu {
background: steelblue;
padding: 20px;
text-align: center;
color: white;
font-family: arial;
display: inline-block;
cursor: pointer;
}
Jquery
$("#menu_element").hover(function(){
$("#bottom_menu").toggle();
});
Result:
Hover function accepts functions to handle in/out events.
Example:
$('#element').hover(
function(){
/* hover handle */
}, function(){
/* un-hover handle */
}
);
Source: https://api.jquery.com/hover/
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
When i add an <li> with the css below i can select the item but if i add it using .append i cannot what am i doing wrong?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="events" class="select" name="events">
<li>Opt 1</li>
</ul>
.
$('ul.select li').click(function(e){
var item = $(e.target);
item.addClass('selected');
item.siblings().removeClass('selected');
$('#events').val(item.text());
});
$('#events').append('<li>Opt 2</li>');
.
ul.select {
list-style: none;
margin: 0;
padding: 2px;
height:50vh;
overflow-x: hidden;
border: 1px solid grey;
width: 50vw;
background-color: black;
color: white
}
ul.select li {
padding: 2px 6px;
}
ul.select li:hover {
cursor: pointer;
}
ul.select li.selected {
background-color: lightgrey;
color: black;
}
See Fiddle for example of issue.
$('ul.select li').click will add an event listener to all elements, which match this selector, at the time of the code being called. The following will work:
$('.select').on('click', 'li', function(){
// code here
});
This is called event delegation. Essentially you add an event listener to an element higher up the chain (.select). The click event is then propegated up to the element higher up the chain (.select) and if e.target matches the selector (li), the callback is called.
I am trying to build a simple dropdown plugin for small project of mine. I do not want to use ready plugins, I want to learn by making one on my own.
html:
<div>
<span class="dropdown_triger">press</span>
<div class="content dropdown-closed">
</div>
</div>
css:
span{
display:inline-block;
background: green;
padding: 5px;
}
.content{
position: absolute;
top: 40px;
border: solid 1px black;
width: 200px;
height: 100px;
}
.dropdown-closed { display: none; }
.dropdown-open { display: block; }
and JS:
$(document).ready(function(){
$('body').on('click', '.dropdown_triger', function(e){
var $wrapper = $(this).parent();
var $content = $(this).next();
var $triger = $(this);
if($triger.hasClass('selected')){
$(document).off('mouseup.dropdownDocClick');
console.log('hasClass');
}
$triger.toggleClass('selected');
$content.toggleClass('dropdown-closed dropdown-open');
$(document).on('mouseup.dropdownDocClick',function (e){
console.log('fire');
if (!$wrapper.is(e.target) && $wrapper.has(e.target).length === 0){
if($content.hasClass('dropdown-open')){
$content.toggleClass('dropdown-closed dropdown-open');
$(document).off('mouseup.dropdownDocClick');
}
}
});
});
});
Everything works except for this place:
if($triger.hasClass('selected')){
$(document).off('mouseup.dropdownDocClick');
console.log('hasClass');
}
I expect that mouseup event would not fire anymore but it does. Here is a fiddle, just try it. If I open dropdown, mouseup event is attached to document and keeps firing until I have clicked outside container thus closed dropdown.
But if I close dropdown by clicking again on triger button(span in my example) event is not removed and I can not understand why?
So, I created a delete "button" in a span, but for some reason I can't get the .click() to fire. Any ideas? I'm new to jQuery and am thinking that it's something obvious. I tested in Chrome and Safari with no luck.
CSS:
.delete_button {
cursor:pointer;
color: #fff;
border: 1px solid #FFF;
border-radius: 15px;
background: #AAA;
font-size: 8px;
line-height: 0px;
padding: 0px 2px 0px 2px;
}
HTML/PHP:
<span class="delete_button" id="delete_<? echo $some_id; ?>">X</span>
jQuery:
$(document).ready(function() {
$('.delete_button').click(function() {
var transaction_id = $(this).attr('id').replace('delete_','');
alert("Delete transaction #" + transaction_id);
return false;
});
});
use .on()
As your span is added dynamically so it is not present at the time DOM ready or page load.
So you have to use Event Delegation
Syntax
$( elements ).on( events, selector, data, handler );
like this
$(document).on('click','.delete_button',function(){
// code here
});
or
$('parentElementPresesntAtDOMready').on('click','.delete_button',function(){
// code here
});
your code becomes
$(document).ready(function () {
$(document).on('click', '.delete_button', function () {
var transaction_id = $(this).attr('id').replace('delete_', '');
alert("Delete transaction #" + transaction_id);
return false;
});
});
It seems like the span is dynamically created, you need to use event delegation. Bind it to the closest static parent or document
$(document).on('click','.delete_button',function(){
/*Your code*/
});
There is a simpler solution for old webkit: set cursor to pointer via CSS for the span.
Tested and working on a music web app.