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');
});
Related
This question already has answers here:
How to select an element inside "this" in jQuery?
(2 answers)
Closed 2 years ago.
Hi I'm trying to use jquery to autoupdate an input field which is wrapped around a contenteditable div. There are multiple such divs that is generated by the backend code, and I would like each input to update only if its parent's div's contenteditable has been updated. The html looks something like this:
<div class="to-change" contenteditable="true">
Text that can be edited
<input name="autoupdate">
</div>
I have tried using the following jquery code:
<script>
$( document ).ready(function() {
console.log( "ready!" );
$('.to-change').on("keyup", function() {
var input = $(this).text()
$('input:first-child').val(input)
})
});
</script>
The thing is when I try to change the text, every other such divs' input field will also be updated with the same text. How do I change the jquery code such that the input field will always take reference from its own parent div?
Thanks!
You can Select that element like this:
$(document).ready(function () {
console.log("ready!");
$('.to-change').on("keyup", function () {
var input = $(this).text()
$('.to-change > :first-child').val(input);
});
})
Or:
$(document).ready(function () {
console.log("ready!");
$('.to-change').on("keyup", function () {
var input = $(this).text()
$('.to-change > input').val(input);
});
})
">" Used for selecting Direct childs of an Element, You can find More about this selector in https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
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();
});
This question already has answers here:
JQuery combine $(document).ready and $('DropDown').change declaration
(2 answers)
Closed 8 years ago.
i want to change this line of code to run ready and change
jQuery('#form_auction_type').change(function(e) {
editing the line to
jQuery('#form_auction_type').ready(function(e) {
fixes my problem, but i still need .change function
the whole code:
jQuery('#form_auction_type').change(function(e) {
if (jQuery('#form_auction_type').val() == '2') {
jQuery('#form-row-rapper-price_bin').show();
} else {
jQuery('#form-row-rapper-price_bin').hide();
how can i put ready and change in the same line!!
Change it to
jQuery(function($) {
$('#form_auction_type').on('change', function() {
$('#form-row-rapper-price_bin').toggle($('#form_auction_type').val() == '2');
}).trigger('change');
});
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');
}
});
});