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);
});
Related
This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 7 years ago.
var vaStyle = $("nav.global_nav, .rsGCaption .intro-caption");
var vid_detach = $("div.rsCloseVideoBtn");
var vid_launch = $("h1#vidLaunch");
vid_launch.click(function () {
vaStyle.addClass("hprs-video-active");
});
vid_detach.click(function(){
vaStyle.removeClass("hprs-video-active");
});
Why isn't my removeClass working? Is there a better method?
Also, when you declare a var does it work document-wide?
Sounds like your elements are getting added dynamically. Use event delegation for solving this. I made changes to the event binding.
var vaStyle = $("nav.global_nav, .rsGCaption .intro-caption");
var vid_detach = "div.rsCloseVideoBtn";
var vid_launch = "h1#vidLaunch";
$(document).on('click', vid_launch, function () {
vaStyle.addClass("hprs-video-active");
});
$(document).on('click', vid_detach, function () {
vaStyle.removeClass("hprs-video-active");
});
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:
Javascript infamous Loop issue? [duplicate]
(5 answers)
Closed 8 years ago.
I have multiple <div class='drop'> with jQuery .slideUp() and .slideDown() attached to them. I would like to use some kind of loop to determine which one of the trigger <span class='more'> was clicked and .slideDown() the corresponding <div>. Here's what I've got so far:
$(document).ready(function(){
var i=0;
$('.more').eq(i).click(function(){
$('.drop').eq(i).slideDown(800) && $('.more').eq(i).hide(300);
});
$(".less").eq(i).click(function(){
$(".drop").eq(i).slideUp(800) && $(".more").eq(i).show(500);
});
});
It works as long as I define i and don't put it in a loop. As soon as it's looped like so:
$(document).ready(function(){
for(var i=0; i<$('.drop').length; i++){
$('.more').eq(i).click(function(){
$('.drop').eq(i).slideDown(800) && $('.more').eq(i).hide(300);
});
$(".less").eq(i).click(function(){
$(".drop").eq(i).slideUp(800) && $(".more").eq(i).show(500);};
});
};
});
It stops working. What am I missing?
Consider the following segment of code:
for(var i=0; i<$('.drop').length; i++){
$('.more').eq(i).click(function(){
$('.drop').eq(i).slideDown(800) && $('.more').eq(i).hide(300);
});
}
When does that anonymous function get called? When one of the .more elements is clicked.
What is the value of i at that point? The loop has finished by the time the element is clicked, so i === $('.drop').length.
So when the anonymous function is called, it's like executing the function:
function(){
var i = $('.drop').length;
$('.drop').eq(i).slideDown(800) && $('.more').eq(i).hide(300);
}
and it's pretty clear that $('.drop').eq($('.drop').length) isn't very useful.
You could fix it by creating a new function with a locally scoped copy of i at each iteration:
for(var i=0; i<$('.drop').length; i++){
$('.more').eq(i).click(function(i) {
return function(){
$('.drop').eq(i).slideDown(800) && $('.more').eq(i).hide(300);
};
}(i));
}
However if all your elements with that class belong to some subtree of the DOM, there is probably a better way using event delegation. Bind to the click handler of the parent of that subtree and then handle it there and use e.target to determine which element was clicked. There is an example of that here.
It is because of the wrong use of a closure variable in a loop, in this case there is no need to use a loop.
jQuery(function ($) {
var $drops = $('.drop');
var $mores = $('.more').click(function () {
$drops.eq($mores.index(this)).slideDown(800) && $(this).hide(300);
})
});
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:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
my have some trouble to call a JavaScript/jQuery 1.9.1 method on dynamic added html-elements.
Here is my JS-code:
$(".download").live("click", function() {
var buttonId = $(this).attr("id");
alert(buttonId);
});
My dynamic HTML code:
var html = "";
for(var i = 0; i <daten.length; i++) {
html += "<input id='" + daten[i].pfad + "' class='download' type='image' width='25px' height='25px' src='/download.png'/>";
}
$("#table").append(html);
I get no error message, but the method is besides not calling, what is here not correct?
Try using on(), as live() was deprecated and removed in newer versions of jQuery:
$('#table').on('click', '.download', function() {
alert(this.id);
});
FIDDLE
works for me ?
Use .on instead
$(document).on("click",".download",function() {
var buttonId = $(this).attr("id");
alert(buttonId);
});
use like this:
$(document).on("click",".download",function() {
//put your code here
});