Jquery - Removing appended code not worked - javascript

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

Related

disable a link after click using jQuery

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);
});

jQuery: remove or hide overlay div?

I'm creating an overlay div using the following code when an image thumbnail is clicked:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs)
return false;
});
});
</script>
This works fine.
Now i need to remove or hide the overlay div when the user clicks on the img with the id of imgBig. so I tried this:
<script>
jQuery(document).ready(function(){
jQuery( "#overlay #imgBig" ).click(function() {
jQuery("#overlay").remove();
});
return false;
});
</script>
but for some reason it just doesn't work which means it doesn't hide/remove the overlay div!
Could someone please advise on this issue?
Thanks in advance.
The click function doesn't work with dynamically created elements. Also, id's are unique so you should only need to use #imgBig in the selector.
Try this:
jQuery(document).ready(function(){
jQuery( "#imgBig" ).on('click', function() {
jQuery("#overlay").remove();
});
return false;
});
You should use the second part inside the first function, like this (I replaced Jquery with $):
...
var imgs = (this.href);
$('#overlay #imgBig').attr("src", imgs);
$( "#overlay #imgBig" ).click(function() {
$("#overlay").remove();
});
return false;
A JSFiddle example:
JSFiddle
Now i need to remove or hide the overlay div when the user clicks on
the img with the id of imgBig
Try assigning click event to img element having src set to imgs
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs);
// assign `click` event to `img` element having `src` set to `imgs`
jQuery("img[src=" + imgs + "]").on("click", function() {
// do stuff
// e.g., remove or hide the overlay div
$(this).parent().remove();
});
return false;
});
});
The problem is that the on() or the click() function doesn't work with dynamically generated HTML content. Previously you could use the live() method but currently it's deprecated in jQuery. Fortunately, the on() method accepts a second argument especially for these cases. So you can use:
jQuery( "body" ).on( 'click', '#imgBig', function() {
jQuery("#overlay").remove();
});
Here's a Fiddle: http://jsfiddle.net/y5y1x5vm/
Hope that solves your problem.

Jquery on hover and out

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

How to fade in closest image?

I tried writing a small script to Fadein the closest image using jQuery but for some reasons this code is not working. Can anyone help me with the syntax? Thanks
$( ".delimg" ).click(function() {
$(this).closest( "img" ).fadeTo( "slow" , 0.5, function() {
$("input[type='button']").toggle(
function(){
$(this).val("Undelete");
},
function(){
$(this).val("Delete");
}
);
});
});
HTML
<div class="swiper-slide">
<img src="http://20percents.com/backend/uploads/C0d49a7de7b635477125ffffa8df7b931.jpg" class="swipe-image">
<center><input type="button" class="delimg" value="Delete"></center>
</div>
<div class="swiper-slide">
<img src="http://20percents.com/backend/uploads/C0d49a7de7b635477125ffffa8df7b932.jpg" class="swipe-image">
<center><input type="button" class="delimg" value="Delete"></center>
</div>
Fiddle: http://jsfiddle.net/e27r8/597/
The img element is not a direct parent of the button which is clicked. You need to use closest to get the containing div, then search for the image within that. Try this:
$(".delimg").click(function () {
$(this).closest(".swiper-slide").find('img').fadeTo("slow", 0.5);
});
Updated fiddle
Also, note that toggle can no longer be used in the manner you are. It will only show/hide elements now, not run specific functions on successive clicks.
To change the text of the button as required, you can pass a function to val() like this:
$(".delimg").click(function () {
var $button = $(this);
$button.closest(".swiper-slide").find('img').fadeTo("slow", 0.5, function() {
$button.val(function(i, value) {
return value == "Delete" ? "Undelete" : "Delete";
});
});
});
Example fiddle
As img is not parent of input so,you have to do this way:
$(this).closest(".swiper-slide").find("img")
You have to get parent div with class swiper-slide and then get img from inside it.
It's not an ancestor, so you need to traverse -
$(this).closest( ".swiper-slide" ).find("img").fadeTo( "slow" , 0.5, function() {
you should go up one level, and then find
$(...).parent().find(...);
$( ".delimg" ).click(function() {
$(this).parent().find( "img" ).fadeTo( "slow" , 0.5, function() {
$("input[type='button']").toggle(
function(){
$(this).val("Undelete");
},
function(){
$(this).val("Delete");
}
);
});
});
edit
i missed <center> tag
use .parent().parent()

Append <div> with click and remove with click

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();
});

Categories

Resources