I have an HTML file, in which I am creating a text area when user clicks inside a table cell. Basically, it is a datagrid created using table, and when user clicks on one, it removes the text in cell and replace it with a text area. Below is the code I am using in table's onClick handler.
summaryTableElement.innerHTML = "<textarea id='summaryTextBox' value='TestString' onclick='doNothing(this.id)'> </textarea> <input type='button' onclick='saveSummary()' value='Save' /> "
This is all working fine, and it creates a text area perfectly. It bugs out when user clicks on the text area to modify the data. In that case, the click event handler of the text area never fires. Instead, the table receives the click event, resulting in creating another text area. No matter what user does, the text area receives no event at all.
Now, I am confused as to what to do here.
Edit:
I checked again. turns out, it is firing the child's click event handler. But, event is propagating to parent element too.
Edit:
I tried adding following condition in parent's click event handler
if (id.toString() == "SummaryData")
but this returns true even for child element.
Use a flag indicating the click once. If it is clicked already, then don't run the function. Now the problem of the text area. in your dynamically getting created html code, add an onfocus event handler insteaad of onclick. Also the 'id's cannot be the same for all the text areas you are adding dynamically. Use something like "id='xyz"+i+"'" where 'i' represents a count which is the number of the text area getting added.
Related
Result:https://goodapps.w3spaces.com/tablecalc.html
I am creating a app called Aswin's TableCalc in html and I captured an issue.
I was using document.activelement to get to the active element, but when the Do calculation button is clicked the previous selcted input gets out of focus. I need to get the input that was focused before it got out of focus so that it could copy the calculation that it did from the function bar into the input that was focused.
I figured put there was a dom method called focus() to focus an element.
In the following snippet, why does divClicked() trigger twice when the <label> is clicked, but only once when <input> is clicked?
function divClicked(_index) {
console.log("div click event");
}
function inputClicked(_index) {
console.log("input click event");
}
<div class="option" onclick="divClicked(1)">
<input id="1_1" name="group_1" type="radio" value="1" onclick="inputClicked(1)" />
<label for="1_1">label</label>
</div>
Note: I want to know why this happens, not a "quick fix" like: put onclick() on label.
This happens because of what the HTML spec describes at 4.10.4:
For example, on platforms where clicking a checkbox label checks the
checkbox, clicking the label in the following snippet could trigger
the user agent to run synthetic click activation steps on the input
element, as if the element itself had been triggered by the user:
<label><input type=checkbox name=lost> Lost</label>
On other platforms, the behavior might be just to focus the control,
or do nothing.
This means that when a <label> is clicked, the browser creates a second "synthetic" click event on the associated <input> element, in order to toggle its state.
The reason divClicked is triggered twice, is because the first event which comes from the <label> bubbles up to the <div>, and also the second, synthetic click event bubbles up to the <div>.
This is usually be cause of the bubbling principle of click event:
When an event happens on an element, it runs on it, its associated elements,its parent and other ancestors.
Now, The relation is when you click on label there a are two events which bubbles up here:
1) Click on div (which you expect)
2) Click on input (which is also expected)
2.1) When click on input is triggered then a click on div is also triggered again here
You can confirm this behavior by using event.bubbles prop.
EDIT:
The reason for the connection between label and input: (I know this is absolutely not required, as it's present all over the place yet)
A <label> can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.
Taken from: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
Which means placing for on label referencing id of an input element will stimulate the behavior as if the element is inside the label. This would bubble a event on input onto label like any event on child to parent
At some moments, check also if the javascript file asset isn't loaded twice .... it shouldn't happen, but you never know.
In the following snippet, why does divClicked() trigger twice when the <label> is clicked, but only once when <input> is clicked?
function divClicked(_index) {
console.log("div click event");
}
function inputClicked(_index) {
console.log("input click event");
}
<div class="option" onclick="divClicked(1)">
<input id="1_1" name="group_1" type="radio" value="1" onclick="inputClicked(1)" />
<label for="1_1">label</label>
</div>
Note: I want to know why this happens, not a "quick fix" like: put onclick() on label.
This happens because of what the HTML spec describes at 4.10.4:
For example, on platforms where clicking a checkbox label checks the
checkbox, clicking the label in the following snippet could trigger
the user agent to run synthetic click activation steps on the input
element, as if the element itself had been triggered by the user:
<label><input type=checkbox name=lost> Lost</label>
On other platforms, the behavior might be just to focus the control,
or do nothing.
This means that when a <label> is clicked, the browser creates a second "synthetic" click event on the associated <input> element, in order to toggle its state.
The reason divClicked is triggered twice, is because the first event which comes from the <label> bubbles up to the <div>, and also the second, synthetic click event bubbles up to the <div>.
This is usually be cause of the bubbling principle of click event:
When an event happens on an element, it runs on it, its associated elements,its parent and other ancestors.
Now, The relation is when you click on label there a are two events which bubbles up here:
1) Click on div (which you expect)
2) Click on input (which is also expected)
2.1) When click on input is triggered then a click on div is also triggered again here
You can confirm this behavior by using event.bubbles prop.
EDIT:
The reason for the connection between label and input: (I know this is absolutely not required, as it's present all over the place yet)
A <label> can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.
Taken from: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
Which means placing for on label referencing id of an input element will stimulate the behavior as if the element is inside the label. This would bubble a event on input onto label like any event on child to parent
At some moments, check also if the javascript file asset isn't loaded twice .... it shouldn't happen, but you never know.
in my current scenario i can't us any server controls.
there is an input type button when click on this a span should come and act as water marker
giving some message when you click on the message any where a run time generated text box should come in place of span.
where user can input the value and after entering if he click any where on the form the value should be assigned to new span generated run time .
An example to visualize my scenario is given below i am also making a tree but with the help js,jquery.
http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/nodeediting/defaultcs.aspx
You should have a single container for each button, attach event on button click to add div over the input including the span with the message(position relative and zIndex > button zIndex) and on the newly inserted div attach another click handler which will replace the span with an input (actually the content of the container added so you wont have to worry about positioning) and on window.click you should check in a stored variable if you have any "popup" open and close & save. I trust you are familiar with HTML injection and $().html, $().append, $().click or $().bind since you said you are making a tree with jQuery.
After you give this a go maybe you will come up with more pinpointing questions so we could give you exact answers.
I have a bubble that pops up when you select some text on a document. Now when you select some text, the body click event fires too. On body event, I have code to hide the bubble that pops up when you select some text. The problem is, I want to show the bubble when the text is selected (even though body event has fired) but I want to hide it when clicked anywhere except inside the bubble.
$('body').live('click', function(e) {
if($(e.target).parents('.discuss').length == 0) {
$('.discuss').fadeOut(150);
}
});
... there is the body event code, now the discuss bubble shows up when some text is selected on the body, the discuss bubble is positioned near the selected text
In the body click handler look at e.target (srcElement in IExplorer). If the target/srcElement is different than the element containing the text you will now that the user has clicked somewhere else in the document and will close the bubble. If the target is the text element itself just return, no need to do anything.
I dont understand clearly by reading your question description.
But as your header title says on "second clik".
flag=0;
Why dont you set a flag value on first click on a hidden field.
(flag=1)
Then on second click check the hidden field value and do what you want. if(flag==1) do it
Show hide or whatever.
Dont forget to reset the value again.
have you tried using mouseup instead of click on the body? that way the bubble will only appear when visitor selected the text and releases their mouse...