I have the following problem:
I append the div:
$(".class").click(function() {
$(this).append("<div class='click'></div>");
$("div.click").show();
});
Then i remove it with a click on another button but the div is still there.
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});
Try keeping a pointer to the div the following should work.
var tempDiv;
$(".class").click(function() {
tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
tempDiv.remove();
});
Otherwise you can use this way
$(".class").click(function() {
$("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
$('.click').remove();
});
PS: You may also remove the .show() if the .click class is not hidden by default
Try this
You have two buttons.
Say:
<div class="Main">
<div>Div0</div>
</div>
<button class="button1">Click to add</button>
<button class="button2">Click to remove</button>
and JS Code is :
var counter=1;
$(".button1").click(function() {
$('.Main').append("<div class='click'> newly added Div "+counter+"</div>");
counter++;
$("div .click").show();
});
$(".button2").click(function() {
$('.Main div').remove(':last-child');
});
Here is an example based on your work : http://jsfiddle.net/UQTY2/128/
<div class="class">Click to add a green box</div>
<button class="button">Click to remove all green boxes</button>
$(".class").click(function() {
$(this).append("<div class='click'></div>");
});
$(".button").click(function(e) {
e.preventDefault();
$("div.click").remove();
});
this will remove
$(".button").on("click", function (e) {
e.preventDefault();
$("div.click").remove();
});
check my fiddle
http://jsfiddle.net/suhailvs/4VmYP/2/
When you dynamicly create element, you need delegated-event: .on( event, selector, handler(eventObject) ).
$(document).on("click", ".button", function(e){
e.preventDefault();
...
$("div.click").hide();
});
If you want remove element, you shoud use .remove() method instead of .hide().
you can dynamically add and remove div with javaScript like this
Check this example
Add and Remove Div dynamically
in this example the default remove button remove the most recent added div or you can say the last div in the container
But if you want to remove particular div with div place number you can enter the div number .
Code example
HTML
<div class="Main">
<div>div1</div>
</div>
<button id="ok">add</button>
<button id="del">remove</button>
<label>Enter div number to remove</label>
<input id="V"/>
<button id="Vok">ok</button>
JS
var counter=0;
$("#ok").click(function(){
$('.Main').append('<div> new div'+counter+'</div>');
counter++;
})
$("#del").click(function(){
$('.Main div').remove(':last-child');
})
$("#Vok").click(function(){
var Val=$('#V').val();
$('.Main div:nth-child('+Val+')').remove();
})
remove "on" from
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});
Related
I have a number of links (A elements) STYLED AS buttons with class "btn" and when one of them is clicked, I want that particular button to be disabled. this code doesn't work:
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
There are a gazillion tutorials for preventing the default event of a form submit button, and then disabling that, but that is not quite what I need...
Apparently, my $this isn't pointing to the correct object, or something =)
----------- UPDATE ---------------
SORRY, update above. The element I have is not a button, it is a link styled as a button...
Don't try to disable the Anchor tag. Try to set the href instead.
$('.btn').on('click', function(e) {
e.preventDefault();
$(this).off("click").attr('href', "javascript: void(0);");
//add .off() if you don't want to trigger any event associated with this link
});
You only need to stop defaultevent from links.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
e.preventDefault();
});
This works for me:
$('a').css("pointer-events", "none");
In my case I used the following:
onclick="$(this).css('pointer-events', 'none');"
It works fine.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class='btn'>But1</button>
<button class='btn'>But2</button>
</div>
Instead of using this, you can just specify your target by using its id.
$('.btn').on('click', function(e) {
$('#btn2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button</button>
<button id="btn2" class="btn">Button</button>
<button id="btn3" class="btn">Button</button>
Hope it helps
$('.btn').on('click', function(e) {
$(this).attr('disabled', true);
});
Check this post: https://stackoverflow.com/a/5876747/5243272
This works (in chrome), but perhaps some drawbacks?
$('.btn').on('click', function(e) {
if( $(this).prop('disabled') == true) {
return false;
}
$(this).prop('disabled',true);
});
$(document).ready(function() {
$('.btn').on('click', function(e) {
e.stopPropagation();
e.preventDefault();
alert('I have been clicked!');
$(this).css('pointer-events', 'none').css('cursor', 'default');
});
});
This will prevent any other further clicks on that link.
If your Html like this
This is another paragraph.
use below code :
$(".test").one("click", function() {
var clas = $(this).attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
If your Html like this
<button class="btn">This is another paragraph.</button>
use below code :
$(".btn").one("click", function() {
var clas = $(this).parent().attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
I am trying to hide a div whenever I will hover over it and show another one in the same place.. And when I take the mouse out of that.. the previous div will be shown and this div will be hidden...
$(document).ready(function(){
$('#hover_tutor').hover(
function () {
$('#hover_tutor').hide();
$('#hover_tutor_hidden').show();
},
function () {
$('#hover_tutor').show();
$('#hover_tutor_hidden').hide();
}
);
});
<div id="hover_tutor">Blah</div>
<div id="hover_tutor_hidden" style="display:none;">Bleh</div>
But on hovering the hover_tutor... something is happening.. It's jumping up and down.. I don't know what's wrong...
You need to use .mouseenter event for #hover_tutor div and .mouseleave for #hover_tutor_hidden div:
$('#hover_tutor').mouseenter(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').mouseleave(function () {
$('#hover_tutor').show();
$(this).hide();
}
).mouseleave();//trigger mouseleave to hide second div in beginning
Working Demo
You can also use toggle method instent of hide/show on hover event
<div id="hover_tutor" style="display: block;">Blah</div>
<div id="hover_tutor_hidden" style="display: none;">Bleh</div>
$('#hover_tutor').hover(
function () {
$('#hover_tutor').toggle();
$('#hover_tutor_hidden').toggle();
});
Working demo
http://jsfiddle.net/ivyansh9897/8jgjvkqk/
try this,
$('#hover_tutor').hover(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').hover(function () {
$('#hover_tutor').show();
$(this).hide();
}
));
If you do have the flexibility to modify your html little bit using class attribute there's a better way. Use .toggle() to alter the state of your element on both mouseover and mouseleave.
HTML :
<div id="hover_tutor" class="hello">Blah</div>
<div id="hover_tutor_hidden" class="hello" style="display:none;">Bleh</div>
jQuery :
$(".hello").on("mouseover mouseleave", function(){
$("#hover_tutor").toggle();
$("#hover_tutor_hidden").toggle();
});
jsFiddle
I'm using jquery to togle content with a button, I would like to hide the content when I click outside my "contentcone" div. The HTML is the following
<div class="togglecone">
</div>
<div class="contentcone">
<div class="contentleft">
<div class="title">
Cone
</div>
<div class="maincopy">
Hello my friends this is a really nice cone that can be placed anywhere
</div>
<a href="https://www.mcnicholas.co.uk/" class="button">
View on website
</a>
</div>
<div class="contentright"> <img src="images/cone.png" alt=""/>
</div>
</div>
This is the script
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
$(this).toggleClass("expandedcone");
$content.slideToggle();
});
});
http://jsfiddle.net/thomastalavera/SCKhf/914/
This should do it:
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(document).on("click", function(e) {
if( $(e.target).is(".togglecone") ) {
$(this).toggleClass("expandedcone");
$content.slideToggle();
} else {
$content.slideUp();
}
});
});
DEMO
You need to set a click event on document to close the box. I tried to keep your original click function intact.
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
$(this).addClass("expandedcone");
$content.slideDown();
});
$(this).on('click', function(e) {
if ($(e.target).is('.togglecone')) { // don't slide up if you click the cone
return;
}
if ($(".togglecone").hasClass('expandedcone')) {
$content.slideUp();
$(this).removeClass("expandedcone");
}
});
});
http://jsfiddle.net/SCKhf/925/
A simple and pretty blunt way to do this is:
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
e.stopImmediatePropagation();
$(this).toggleClass("expandedcone");
$content.slideToggle();
});
$("body").on("click", function(e){
if ($(".contentcone").is(':visible')) {
$(".togglecone").click();
}
});
$(".contentcone").on("click", function(e){
e.stopImmediatePropagation();
return false;
})
});
But note it has a lot of disadvantages, is just a blunt solution to your problem, it must be tweaked to be ok as a permanent choice.
Edit (to answer the question in comment):
Sure, I know more than 1, each depending on your layout. You can:
a) Instead of the "body" part, make a selector for whatever elements you want to toggle event one. This works ok on layouts with a small number of big (as size on screen) elements.
b) Add one more condition to the "body" part, where you get mouse position and use it to see if the mouse is in the place you want. You can do this with e.pageX/e.pageY, or you can find relevant relative position to an element here jQuery get mouse position within an element.
This should do it with lesser code:
$(document).mousedown(function (e) {
var container = $(".togglecone");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
Whenever i press one of the buttons they change to .active css (this is good) but the problem is : when i click another button , they change to the .active css (which is good), but the previous button keeps their .active css, i dont want that , after i click another i want them to take the default css and just the button that is pressed to take the .active css
HTML
<button id="btn1">a</button>
<button id="btn2">b</button>
<button id="btn3">c</button>
<button id="btn4">d3</button>
<button id="btn5">e 4</button>
<button id="btn6">f 5</button>
<button id="btn7">g 6</button>
<button id="btn8">h 7</button>
<div class="divToHide" id="story">story</div>
<div class="divToHide" id="z1">1</div>
<div class="divToHide" id="z2">2</div>
<div class="divToHide" id="z3">3</div>
<div class="divToHide" id="z4">4</div>
<div class="divToHide" id="z5">5</div>
<div class="divToHide" id="z6">6</div>
<div class="divToHide" id="z7">7</div>
CSS
#z1, #z2, #z3, #z4, #z5, #z6, #z7 {
display: none;
}
.active {
color: red;
}
JS
$(function () {
$('#btn1').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#story').fadeToggle(400);
});
$('#btn2').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z1').fadeToggle(700);
});
$('#btn3').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z2').fadeToggle(700);
});
$('#btn4').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z3').fadeToggle(700);
});
$('#btn5').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z4').fadeToggle(700);
});
$('#btn6').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z5').fadeToggle(700);
});
$('#btn7').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z6').fadeToggle(700);
});
$('#btn8').on('click', function () {
$('.divToHide').hide();
$(this).toggleClass('active');
$('#z7').fadeToggle(700);
});
});
General tip: Don't repeat jQuery code (especially as it already uses this). Apply a class to all buttons (to allow group selection) and data-drive any additional requirements (like your target elements) from data- attributes.
For this example I just surrounded the buttons in a div so they could all be selected together.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/pEA9R/
$(function () {
$(document).on('click', 'button', function () {
var $this = $(this);
// Fetch the data-id attribute value for our target element
var target = $this.data('id');
// remove the active class from all buttons
$('#buttons button').removeClass('active');
// Hide all target divs
$('.divToHide').hide();
// highlight the clicked item
$this.addClass('active');
// Show the required div
$('#' + target).fadeToggle(400);
});
});
This also uses the delegated version of on. So you could make it listen on the parent of the buttons, rather than document to make is slightly more efficient:
$('#button').on('click', 'button', function () {
Delegated events are great because they only create a single handler connection, and even support dynamically added items (added somewhere within the target ancestor).
Add this line in line 2:
// After This Line:
// $(function () {
$("button").click(function () {$('button').removeClass('active')});
The above code will remove active class for all buttons when you click on one of the buttons.
Create a separate function that removes all active class css from your html. Place the following statement in that function and call it from each button click event. $("button").removeClass('active');
EDIT:
It would be best to wrap your buttons in a div with an id say.. buttonWrapper and use the following code instead. $("buttonWrapper > button").removeClass('active');
I have problem with removing appended code.
Try add some div's and check results.
When you try dblclicked on new div, he won't be removed.
HTML:
<input id="val" name="value" />
<input id="submit" type="button" value="ok" />
<div id="content"></div>
Script:
$("div[id^='block_']").on('dblclick', function() {
$(this).remove();
});
$("#submit").click(function(){
if ( $('#val').val().length > 0 )
{
$('#content').append('<div id="block_'+ $('#val').val() +'">'+ $('#val').val() +'</div>');
$('#val').val('');
}
});
Here's JSFiddle
I use jquery 2.0.3.
Your element is not there when you are binding the click event. Use delegeted event :
$('#content').on('dblclick', "div[id^='block_']", function() {
$(this).remove();
});
Here all the information you need : http://api.jquery.com/on/#direct-and-delegated-events
As your divs are generated dynamically so use event Delegation with .on():
$(document.body).on('dblclick',"div[id^='block_']", function() {
$(this).remove();
});
Fiddle Example
Why do you have this part in your code?
$("div[id^='block_']").on('dblclick', function() {
$(this).remove();
});
If you're doing this because you want to select the ID of a div tag as the selector you don't have to do it this way.
For example if you want to remove you would do this:
$("#content").on('dblclick', function() {
$(this).remove();
});
another way would be creating the div and assigning the event before appending it to the dom
var div = $('<div id="block_'+ $('#val').val() +'">'+ $('#val').val() +'</div>');
div.on('dblclick',function(){$(this).remove();});
$('#content').append(div);
jfiddle