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 */ });
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 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();
});
I'm new to JavaScript and have used the primary post about how to toggle classes from here: Change an element's class with JavaScript but for some reason my code is not executing like I would expect it to. The code is placed in the bottom of an HTML file.
<script>
$(document).ready(function () {
$('.arrow').addEventListener('click', function() {
if (this.hasClass('glyphicon-chevron-right')) {
this.addClass('glyphicon-chevron-left');
this.removeClass('glyphicon-chevron-right');
}
if (this.hasClass('glyphicon-chevron-left')) {
this.addClass('glyphicon-chevron-right');
this.removeClass('glyphicon-chevron-left');
}
}, false);
});
</script>
Set up a click listener and use .toggleClass() instead of those if clauses:
$('.arrow').on('click', function() {
$(this).toggleClass('glyphicon-chevron-right');
$(this).toggleClass('glyphicon-chevron-left');
});
Or more succinctly
$('.arrow').on('click', function() {
$(this).toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
});
Just use the jQuery click event.
$('.arrow').click(function() {
if (this.hasClass('glyphicon-chevron-right')) {
this.addClass('glyphicon-chevron-left');
this.removeClass('glyphicon-chevron-right');
}
if (this.hasClass('glyphicon-chevron-left')) {
this.addClass('glyphicon-chevron-right');
this.removeClass('glyphicon-chevron-left');
}
});
if you want to add the event specifically with an event listener you would probably have to select the actual element instead of the jQuery object: $('.arrow')[0]
This question already has answers here:
Jquery dynamic button : how to bind to exisitng click event by class
(2 answers)
Closed 9 years ago.
I have a button which calls a function via data-bind and generates a new button.
self.submitNewPopUp = function(data, event) {
var butnId = event.srcElement.form.id.replace('style-', '');
var styleButton = $('<input/>').attr({type: 'button', value: data.styleData, id: butnId});
styleButton.onclick = function() {
alert("blabla");
};
$("#showButtons").append(styleButton);
$('#' + event.srcElement.form.id).hide();
};
But the new button has no click event. How to do it?
You'd assign a click event listener to an ancestor of the button using jQuery's on() method. For instance, if your markup was:
<div id="showButtons">
<input type="button" />
</div>
You'd use:
$('#showButtons').on('click', 'input[type=button]', function() { ... });
styleButton button is a jQuery object, not a dom element so it does not have a onclick property. You need to use the click(function(){}) event registration method to register the event handler
styleButton.click(function() {
alert("blabla");
});
Use jquery.on() for the dynamic created elements
$("#div").on("click", "button", function(event){
alert($(this).text());
});
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;
});