This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
Ok so I have a button that when someone clicks it appends some info to a section.
like so:
function() {
$(".blend-tile").click(function() {
$(this).hide();
var li = $('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="infora"></div><div class="percent-mix"></div><div class="mix-value"></div></div></div><div class="clear-tile">X</div></li>');
$('#mixers').append(li);
$('.tpic', this).clone(true, true).contents().appendTo(li.find('.color-img'));
$('.infora', this).clone(true, true).contents().appendTo(li.find('.infora'));
if ($('#mixers li').length === 6) {
$(".tiles").hide();
$(".nomore").show();
}
});
});
Which is all good work's fine.
But I also want all of this to remove() when I click <div class="clear-tile">X</div>.
and for that I am using:
$(function() {
$(".clear-tile").click(function() {
$(this).parent().remove();
});
});
But nothing happens no error nothing.
I also have similar function's in my file that use remove() and such which work fine. It's just anything that I try to trigger from .clear-tile just doesn't work at all.
I have a feeling it's down to me appending it but I'm not sure any help would be much appreciated
You need to use event delegation:
$("#mixers").on("click", ".clear-tile", function() {
$(this).parent().remove();
});
Instead:
$(".clear-tile").click(function() {
$(this).parent().remove();
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I've got some cards (forms) created with ng-angular based on Array list.
On each card i have onClick event which doesn't trigger. If I copy paste the function code on browser console, all events work ! I guess that events aren't bind when the DOM is fully loaded.
These are my functions :
$('.floating-open').on('click', function () {
var $this = $(this);
$this.parents('.clickable-button').addClass('clicked');
$this.parents('.clickable-button').next('.layered-content').addClass('active');
setTimeout(function () {
$this.parents('.card-heading').css('overflow', 'hidden');
}, 100);
});
$('.floating-close').on('click', function () {
var $this = $(this);
$this.parents('.layered-content').prev('.clickable-button').removeClass('clicked');
$this.parents('.layered-content').removeClass('active');
setTimeout(function () {
$this.parents('.card-heading').css('overflow', 'initial');
}, 600);
});
Thanks in advance for your help
try to bind click event like below
$(document).on('click', '.floating-close', function(event) {
//your code
}
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I am facing a problem with on(). Here is my code:
<span class="add" id="id_foo" >add this stuff</span>
$(".add").on('click', function() {
$.post("/toto.com/add.php", { trainning: this.id }, function() {});
$(this).html("Remove this stuff");
$(this).removeClass("add").addClass("remove");
//alert($(this).attr("class"));-->give the good class
});
$(".remove").on('click', function() {
//doesn't work
$.post("/toto.com/remove.php", { trainning: this.id }, function() {});
$(this).html("add this stuff");
$(this).removeClass("remove").addClass("add");
});
The selector for the class remove doesn't recognize it whereas when I click on the button with the add class, the class is changing. Do you know what the problem is?
Thank you for your help!
You need to use delegated event handlers as you're dynamically changing the classes the handlers are attached to. Try this:
$(document).on('click', ".add", function() {
$.post("/toto.com/add.php", { trainning: this.id });
$(this).html("Remove this stuff").toggleClass("add remove");
});
$(document).on('click', ".remove", function() {
$.post("/toto.com/remove.php", { trainning: this.id });
$(this).html("add this stuff").toggleClass("remove add");
});
Depending on the location of the script tag this JS code is in you may also need to wrap your code in a document.ready handler. If it's just before the </body> tag it will work fine, if it's in the head, place it inside $(function() { /* your code here */ });
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
So let's assume that I have this simple code:
HTML:
<div id="test">Hello!</div>
<input type="submit" id="update_map" value="Update!" />
JQUERY:
$("#id").mouseover(function ()
{
alert("TRUE");
});
So far everything works perfect, but when I'm updating the test div with that code:
$("#update_map").click(function ()
{
$.post( "update_ajax.php", function( data ) {
$( "#test" ).html( data );
alert("Done!");
});
});
But now, when I clicked on "Update!", and I'll move my mouse over the "test" div, it won't work.
How can I solve that problem?
try $().on, it is the new version of $().live which does exactly what you want:
$('body').on('mouseover','#id', function(){
alert('true');
});
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
I'm trying to remove the css when somewhere on the page has been clicked. I know how to implement the css changes but can't figure out how to or where to place the listener for a mouse click.
Any suggestions would be great.
$(document).ready(function() {
var friends = false;
$('#friends').click(function() {
friends = true;
$('#cont').css({'left':'502px'});
$('#members').css({'left':'251px','display':'inline','opacity':'1'});
alert(friends);
});
if($(document).click() && friends){
alert('here');
};
});
Got it working eventually using this but modified it alot:
jQuery().ready(function(){
$('#nav').click(function (event) {
$(this).addClass('activ');
event.stopPropagation();
});
$('html').click(function () {
if( $('#nav').hasClass('activ') ){
$('#nav').removeClass('activ');
}
});
});
This question already has answers here:
jquery stop child triggering parent event
(7 answers)
Closed 8 years ago.
Problem is solved, i made another stupid mistake in my code... sorry, thanks
example:
<div id="window1Header" class="windowHeader">
Window 1 <a id="min1" class="minimize">[-]</a> <a id="max1" class="maximize">[+]</a>
</div>
<script>
$(function() {
$(".windowHeader").mousedown(function () {
$(this).parent().css({"border" : "#000 1px dashed"});
$(this).parent().draggable({ containment: 'parent' });
});
$(".windowHeader").mouseup(function () {
$(this).parent().css({"border" : "#ccc 1px solid"});
setTimeout(function() {
$(this).parent().draggable('destroy');
}, 100);
});
$('#min1').click(function(e) {
e.stopPropagation();
$("#window1Body").hide().slideUp(500);
});
$('#max1').click(function(e) {
e.stopPropagation();
$("#window1Body").hide().slideDown(500);
});
});
</script>
The outerdiv (window1Header) has a mousedown and up event and the 2 links (min1 and max1) have click-events. But clicking the links wil trigger the event binded to window1Header.
How can i trigger the right events?
I'm using the jquery library btw.
Any help is appreciated!
Generally, use stopPropagation to prevent the event from bubbling to parent elements. E.g.:
$('.minimize').click(function(e) {
e.stopPropagation();
...
});
You need to at least have an href="#" on your a tags otherwise the click event will never fire. Also, return false in the click events.
$('#max1').click(function(e) {
$("#window1Body").hide().slideDown(500);
return false;
});