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');
});
Related
This question already has answers here:
Persist variables between page loads
(4 answers)
Store a css class on browser
(1 answer)
Closed 6 years ago.
Hi is it possible to add class to element and storage it in element if the page reloads ?
<button></button>
<div class=""></div>
$(document).ready(function () {
$("button").click(function() {
$("div").addClass("test");
});
});
try
$(document).ready(function () {
$("button").click(function() {
$("div").addClass("test");
localStorage['testClass'] = 'test';
});
previousTestClass = localStorage['testClass'];
if (previousTestClass)
$('div').addClass(previousTestClass);
});
This question already has answers here:
Event handlers inside a Javascript loop - need a closure?
(2 answers)
Closed 7 years ago.
I have a javaScript file in which i am trying to bind a function named change by using jQuery i tried this code but it is not working?
script.js
for(var i=1; i<suggestionList.length; i++)
{
$list.append("<li>" + suggestionList[i] + "</li>");
// attach handler for click on the suggestions
$list.find("li").eq(i).click(function() {
change(suggestionList[0], suggestionList[i]);
});
}
function change(changeto,changewith)
{
var replaceto=document.getElementById(changeto).innerHTML;
var replacewith=changewith;
var text1=document.getElementById("para").innerHTML;
var afterRe=text1.replace(replaceto,replacewith);
document.getElementById("para").innerHTML=afterRe;
}
please help me why my code is not working?
you can't use i inside the for-loop for click event. I have set a demo jsfiddle here .check If it helps
for(var i=1; i<suggestionList.length; i++)
{
$list.append("<li>" + suggestionList[i] + "</li>");
// attach handler for click on the suggestions
}
$list.find("li").click(function() {
changewith=$(this).html();
change(suggestionList[0], changewith);
});
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:
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');
}
});
});