I ran into an issue in JavaScript, I tried searching for a solution but I guess I just don't know exactly what I'm searching for - therefor since I could not find an answer to my problem I'm asking for some help here:
I have 2 JavaScript functions which are supposed to simulate a loading page on ajax call just by adding an overlay div and changing the css state of the cursor to loading, then back to normal:
function LoadMouse(ths){
if($("#overlay").length==0){
$("body").css({"cursor":"wait"});
$(ths).css({"cursor":"wait"});
$("body").append(\'<div id="overlay"></div>\');
}
else{
return false;
}
}
function AutoMouse(ths,Cursor){
if (typeof Cursor === "undefined"){ Cursor = "auto"; }
$("body").css({"cursor":Cursor});
$(ths).css({"cursor":Cursor});
$("#overlay").remove();
}
In my code I'm calling this function from jQuery in various places, for example:
function doFirstThing(){
$(document).on("click",".element1",function(){
var This = $(this);
LoadMouse(This);
//do stuff
AutoMouse(This);
});
}
function doSecondThing(){
$(document).on("click",".element2",function(){
var This = $(this);
LoadMouse(This);
//do stuff
AutoMouse(This,"pointer");
});
}
The idea is if element2 had a pointer cursor in the css in the first place - I want it to become a pointer once again.
Now say I call the function on element2 - it works and the cursor changes to a pointer but when I click on element1 the cursor changes to auto for both element1 and element 2, if I click element 3 it will change for elements 1,2 and 3 and so on. How can I fix this problem?
(by the way I'm changing the css on both the body and the element because when I tried it only for the body it would not change on the element itself).
EDIT:
In response to the comment about the html: its just a simple tag:
click here
click here 2
when I click element 2, and run my LoadMouse button passing 2 parameter into it, the following happens when inspecting the element in chrome:
step 1:(when LoadMouse() runs):
click here 2
step 2:(when AutoMouse() runs):
click here 2
But afterwards when I click on element 1 the second elements inline css is affeced as well:
step 1:(when LoadMouse() runs):
click here
click here 2
step 2:(when AutoMouse() runs):
click here
click here 2
Related
I have a little code that creates elements (rectangles) and when I pass the mouse over them, a "customize yellow button appears on it". When I click this button, a popup with colors let us choose a colour to add in the selected rectangle.
Basically, I have 3 elements... click on 1 of them and choose a colour. This action, clones de tag and set it into the selected item. This works fine.
The problem appears when I click in the second item (or third)... I choose a new different colour but the action changes the selected rectangle and the sibling -applies to all elements that already have a cloned - (like propagation)...
I need to customize every single rectangle with its own colour and not all of them with the same. I pasted a little code here and a working (wrong) link in jsfiddle.
The action executes "on" cause the items are created dynamically (in this example I set them manually.
Can anybody help me? I don't understand what I'm doing wrong.
https://jsfiddle.net/martiniglesias/20Laxn84/2/
$(document).on("click","a.person",function (e)
{
e.preventDefault();
e.stopPropagation();
var elrel=$(this).attr('rel');
var elem=$("#ch_dndBoard1 span[data-id="+elrel+"]");
var elemrel=elem.attr("rel");
if (elemrel=="f1E")
{
$("body").append ("<div class='overlay'></div>").show();
$(".persE").fadeIn("fast");
$(".persE li").click(function(f)
{
f.preventDefault();
f.stopPropagation();
var ese=$(this).closest("li");
if ($(this).hasClass("nope"))
{
elem.find('b').fadeOut("slow",function() { elem.find('b').remove(); });
}
else
{
elem.find('b').remove();
var added=ese.find("b").clone();
added.css({"left":0+"px","top":+5.48+"px","position":"absolute"});
$(added).insertAfter(elem.find('em'));
}
$('.persE').fadeOut("fast",function(){ $(".overlay").remove(); });
});
}
return false;
});
I expect that every single rectangle can choose its own colour cloning it from the popup. For example, I want, rect1 blue, rect2 without color, rect3 red...
Thank you!
PS: Please, forgive my poor english :(
You have this issue because you are adding a click event listener to .persE li each time you click on a a.person.
You need to remove that listener when all your logic is over:
$(".persE li").click(function(f) {
// Your code
$(".persE li").off('click');
});
Be aware that if you listen an other click event with a different logic, that one will be destroyed too.
In order to avoid this, you need to reference your different logics in function:
const changeColorEvent = (e) => {
// Your code
$(this).off('click', changeColorEvent); // Here, "otherEvent" will still exist.
};
const otherEvent = (e) => {
// Different logic here
}
$(".persE li").click(changeColorEvent);
$(".persE li").click(otherEvent);
sorry but couldn't find a solution for my problem so far.
I am writing a kind of an email template editor as a little task for my boss.
$('a, span').click(function(event){
var editableElement = $(this);
if($(this).is('a')){
event.preventDefault();
}
if(editableElement.is('span')){
processType(editableElement, 'simpleText', modalContent)
When I send the 'editableElement' variable first time, everything's fine, sends object to my function, where I open up a modal window, where there is a textarea, which if i enter text and submit it using only jQuery it will put the text from the textarea (using .val()) to my desired element, in this case a "span" element which is the 'editableElement' using .text() on it. No problem, it works for the first time. After I try to edit a second span, it constantly modifies the previous span too, with whatever I enter in to the textarea (which is cleared out completely, the problem is NOT here) I've ran a fast debug with a simple foreach on the editable element, and the problem is that for some reason it keeps adding objects to the editableElement variable everytime I send it to the function. The number of spans I try to edit, the number of objects will be in my variable all with the index of 0.
Any idea what could be the cause of this?
Thanks in advance!
EDIT:
As requested the whole code in one piece which I have problem with, though it was the whole code before too, I'm in an early stage of writing it, I understand that it was hard to read though, perhaps now it is properly formatted as requested.
$(window).load(function()
{
var modalContent = $('#modalContent');
modalOverlay = $('#modalOverlay');
$('a, span').click(function(event)
{
var editableElement = $(this);
if($(this).is('a'))
{
event.preventDefault();
}
if(editableElement.is('span'))
{
processType(editableElement, 'simpleText', modalContent)
}
});
$('#codeGenButton').click(function()
{
var container = $('#codeContainer');
container.empty();
container.text(getPageHTML());
});
$('#modalClose').click(function()
{
$(this).parent().parent().animate({'opacity': '0'}, 200,
function(){
$(this).css({'display': 'none'});
});
});
});
function fillData(targetDomElement, modalObject)
{
$('#modalSubmit').click(function(){
targetDomElement.text($('#simpleTextEdit').val());
closeModalWindow();
});
}
function processType(targetDomElement, type, modalObject)
{
modalObject.empty();
if(type == 'simpleText')
{
modalObject.append("<p id='simpleTextEditTitle'>Text editor</p><textarea id='simpleTextEdit'></textarea>");
getModalWindow();
fillData(targetDomElement, modalObject);
}
}
Step by step of what it should do:
First of all, the html should not be needed for this, it does not matter, and this is the whole code honestly.
When you click on either an element of (span) or an element of (a) it triggers the function.
It will check if it was actually a (span), or an (a) element.
Currently if it is an element (a), it does nothing, not implemented yet, but if it is a (span), it will call in the processType function, which it sends the "handler?" of the element to namely "editableElement" which has been declared right after the click event, the 'simpleText' which gets send too, is just to differentiate between element types I will send to the processType function later on, and for the last, "modalConotent" is only a div container, nothing more.
Once the function gets the data first, it will make sure, that the modal window gets cleared of ALL data that is inside of it, then it will append a bit of html code as you can see, in to the modal window, which pops up right after I have appended data in to it, it is literally just a 'display: block' and 'animate: opacity: 1' nothing special there.
Lastly it will trigger the 'fillData' function, which will put my desired data from '#simpleTextField' which is only a (textarea) where you can write in, to my desired element 'editableElement' which is the element you have clicked at the first place, a (span) element after the submit, which is again, just a css of 'display: none' and 'opacity: 0' closes the modal window.
THE END.
Your problem is here
function fillData(targetDomElement, modalObject)
{
$('#modalSubmit').click(function(){
targetDomElement.text($('#simpleTextEdit').val());
closeModalWindow();
});
}
Each time this function is called it adds a new click handler with the perameters at the time the handler was created. This handler is added in addition to the already created handlers. See a demo here. After successive clicks on the spans notices how fillData is called multiple times for a single click.
To give you the best possible answer I need to know where your modalSubmit button is in relation to modalContent. Also is is modalSubmit dynamic or static on the page?
Here is a fairly hacky fix in the mean time using on and off to bind and remove the handler respectively:
function fillData(targetDomElement, modalObject)
{
$('#modalSubmit').off("click"); /*Clear Hanlders*/
$('#modalSubmit').on("click", function(){
console.log("fill data");
console.log(targetDomElement);
targetDomElement.text($('#simpleTextEdit').val());
/*closeModalWindow(); Don't have anything for this so ignoring it*/
});
}
Demo
I've solved it myself by using .submit() (of course this means adding form, and an input with the type of submit) instead of .click() when I send the request to modify the element I've clicked on originally.
I don't understand though, why it did what it did when I've used the .click() trigger.
I have a class in D3 say: selectors and I need to remove the click event from the selection
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
});
Ive got two problems:
The removed element is supposed to be moved to a different part of the page and the I need the click event on it to be removed.
Also, would it be possible to reinsert the removed element into the selection on doing something else, like clicking on the removed element again?
Edit:
Found a solution for problem 1
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
Is this the right way? Or is there a more graceful method?
A Demo Fiddle
here is the updated jquery it will work for your case
$(document).ready(function(){
$(document).on('click','.selectors',function(e){
//$(document).off( 'click','.selectors');
if(e.target.onclick==null)
{
e.target.onclick=
function(){
void(0);
};
alert('test');
console.log('Hello');
}
});
});
For problem 1, the best method(as far as I know) is to redefine the click event in D3 itself:
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
For problem 2, however, once you turn a click event callback to null, the only way is to redefine the click event again, perhaps recursively:
function clickDefine() {
d3.selectAll('.selectors').on('click', function () {
//Remove the currently clicked element from the selection.
console.log('Hello')
d3.select(this).on('click', null);
setTimeout(function(){clickDefine();},1000)
});
}
This function makes the click event inactive for 1 second on click. And reactivates this again. I'm hoping this is an effective solution.
I am adding the form my current list in a div box at the bottom of the table.
I am appending the div box when someone clicks on add button.
But when i click add button multiple times , then many div boxes are appended.
Is there any way that no matter how many times I click the button, only one instance gets append to div box.
This is my code
$var = $(this).parent().parent();
$var.append($('.jq_div')[0].outerHTML);
attach your listener using .one().
$("button").one('click', function(){
// Your code
});
Read more: http://api.jquery.com/one
This is under the assumption that you're using jQuery 1.7+
One simple solution would be having a boolean flag that you can toggle once your button is clicked. Additionally, there is actually a jQuery function that provides this exact functionality.
It's called one() -
Attach a handler to an event for the elements. The handler is executed
at most once per element.
So your code would look something like this -
$("#someTrigger").one('click', function(){
$var = $(this).parent().parent();
$var.append($('.jq_div')[0].outerHTML);
});
The boolean method is also very simple -
var wasClicked = false;
$("#someTrigger").on('click', function(){
if (wasClicked == false){
// append your form
wasClicked = true;
}
});
Reference -
one()
I'm doing a site for a kiosk, so the site goes like a photoslide in-between each div.
I put a layover/mask on the first page, and the layover/mask is removed on a mouse click function at the moment. (As a side note this is for the purpose of hiding the address bar on the first screen for the kiosk as the first page/div is an a tag)
$("#item1").append('<div id="pageLayover"></div>');
$(document).click(function(){
$("#pageLayover").remove();
});
Everytime you click your mouse to remove the layover then you need to click another time then the first a tag page will slide to the second page.
Is there any way I can have one click only not two to remove layover/mask and to let first page to slide to the second page at the same time?
Here is my code on jsFiddle Any code/links/examples would be great help.
Thanks in advance!
Your question is very confusing, but maybe this is the answer you're looking for:
To make the click on the layover in fact two clicks, you can simply trigger the click event of the first panel:
$('#pageLayover').live('click', function(e) { // <-- updated!
$("#pageLayover").remove(); // remove our layover from the DOM
$panels.eq(0).click(); // <-- trigger click event of 1st element of $panels
});
This does not check if the click occurred on the panel though.
You can solve the problem with the multiple layovers with this:
$('#wrapper').scrollTo($(this).attr('href'), 800,{
onAfter: function(id){
if ($('#pageLayover').length == 0) { // <--- new
$("#item1").append('<div id="pageLayover"></div>');
} // <--- new