I am designing a footnote at the bottom of an article to annotate following up status;
<article class="col-md-12">
</article>
<div class="col-md-12 footnote">
add a footnote
</div>
When the "add a footnote" link is hidden after being clicked and prompt the "footnote form" which I set autofocus which textarea. The "autofucus" works properly.
$('.footnote-link a').on('click', function (e) {
e.preventDefault();
...
var $footnoteForm = $(`
<form class="article-footnote-form footnote-form" style="margin-top:10px" >
<div class="form-group row">
<div class="col-md-9">
<textarea class="form-control" name="footnote" rows="3" autofocus></textarea>
</div>
<div class="col-md-3">
<button class="btn btn-primary" type="submit" id="articleFootnoteBtn">Add Annotation</button>
</div>
</div>
</form>`);
$articleFootnoteLink.parent().hide();
$articleFootnoteLink.parent().after($footnoteForm);
The form is submitted to server using Ajax then I cleared the forms by
$footnotesTop.find(".footnote-form").html(""). Now the page displays the article and the newly added footnote.
However, if I click the "add footnote" again, it unable to get focus automatically as it does at first time until I refresh the page to click.
How could I get the form focus during the second click event.
You need to use a delegated eventHandler. The js code $('.footnote-link a').on('click', function (e) { is only applied to the elements jQuery finds using that selector when the page is loaded.
Try $( document ).on('click', '.footnote-link a', function (e) {. You can use a tighter selector rather than document - it seems like .footnote would work based on what I see.
jQuery delegated events tutorial
Related
I am making a chrome extension and the popup has a single input element to which I'm programmatically assigning an on-change event listener.
$(".search").change(function() {
console.log($(this).val());
});
Here is the html
<div class="title">extension</div>
<div class="animated-page-container">
<div class="stats">
<h1></h1>
</div>
<div class="website">
<div class="search-container">
<div class="search-box">
<div class="container">
<div class="search-icon"></div>
</div>
<input class="search" id="search" />
<div class="icon-container">
<div class="add"></div>
<h1 class="tooltip">Add to list</h1>
</div>
</div>
</div>
<div class="website-list-container">
<div class="website-list"></div>
</div>
</div>
</div>
I have a search icon with class search-icon next to it which has no event listeners attached to it.
The onchange event never gets fired when the input value changes. Instead when i click on the search icon it fires the onchange event. Chrome dev tools doesn't even show any listener being attached to the search icon. I have tried replacing the class of search with an id and attaching a listener to it, but in any case the behaviour remains the same.
The onchange event is always fired when the element loses focus, after the content has been changed. If you're looking for an event that fires immediately after each input, try the oninput event like so:
$(".search").on("input", function() {
console.log($(this).val());
});
I'm using Framework7 and I'm trying to just make a fairly simple button click setup that triggers an alert window. The setup is as follows:
<div class="col-100">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Custom Message</div>
<div class="item-input-wrap">
<input id="custom-message-input" type="text" placeholder="Your message here..." />
<span id="custom-message-clear" class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
<a id="custom-message-button" class="button button-raised button-fill">Send Custom Message</a>
</div>
</div>
And the click event is initialized like so:
app.on('pageInit', function (page) {
$('#custom-message-button').on('click', () => {
$('#custom-message-clear').click();
app.dialog.alert('Message was successfully sent.', 'Information');
});
...
But for some reason, when I click the button, it triggers twice. The alert appears once, I click it away, then it appears again, and I click it away. Then it stays gone.
What might I be missing here?
If anyone should stumble upon this in the future; It's because "pageInit" is called for every page that is found in the router. Use the "name" property to figure out what page is currently being initialised.
I have the following setup in my page
When I click the main box for a division it becomes selected then the department and teams are updated in the tabs on the right. However I also want to click the edit icon to edit the name of the division.
Because the edit click event is inside the select division click event both events are being triggered when I click on edit.
What would be the solution to this? How do I click the edit button and only trigger that event without triggering the select division event? Do I have to move it outside the html then relative position it? Is there a better way?
<div class="divisionList">
<div *ngFor="let division of filteredDivisions" (click)="selectDivision(division)"
<form [formGroup]="formDivision" fxLayout="row" class="divisionForm">
<h4 *ngIf="!isDivisionNameBeingEdited(division)">{{division.name}}</h4>
<input matInput #editTitle (change)="submit()"
*ngIf="isDivisionNameBeingEdited(division)" class="mrmd titleInput"
id="title2" formControlName="division" />
<div fxFlex></div>
<mat-icon (click)="editDivisionName(division)">edit</mat-icon>
</form>
</div>
</div>
This the way click events are handled in JavaScript. They 'bubble' or propagate up through the parent elements. You'll need to handle the event and explicitly tell it to not propagate up the chain of elements.
<div class="divisionList">
<div *ngFor="let division of filteredDivisions" (click)="selectDivision(division)"
<form [formGroup]="formDivision" fxLayout="row" class="divisionForm">
<h4 *ngIf="!isDivisionNameBeingEdited(division)">{{division.name}}</h4>
<input matInput #editTitle (change)="submit()"
*ngIf="isDivisionNameBeingEdited(division)" class="mrmd titleInput"
id="title2" formControlName="division" />
<div fxFlex></div>
<mat-icon (click)="editDivisionName($event, division)">edit</mat-icon>
</form>
</div>
</div>
in .ts file
editDivisionName($event: MouseEvent, division) {
$event.stopPropagation();
}
StackBlitz demonstration
I have a form with two div elements see code below:
DIV1 id="hide_onclick": should hide when a submit button is clicked
DIV2 id="show_onclick": should display when a submit button is
clicked
However when the Javascript executes on onClick, DIV2 displays query results in a flash and hides back. If i change the input type="submit" to type="button", DIV2 shows properly but i wont be able to get query results.
I could not figure out how to fix this.
<!--Form uses vehicle registration to pull record from database -->
<form class="form-horizontal" method="post">
<div class="row" style="padding-bottom:10px;">
<div class="col-sm-4">
Vehicle Registration
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="vehiclereg" value="<?php echo $vehiclereg;?>" />
</div>
</div>
<!--Visible div to hide on button click -->
<div id="hide_onclick">
<div class="row" style="padding-bottom:10px;">
<div class="form-group">
<div class="col-xs-12">
<input type="submit" name="retrieve_vehicle" value="Click to retrieve vehicle" onclick="show_hideDiv();" />
</div>
</div>
</div>
</div>
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
Upadates from database
</div>
</form>
<!--Javascript to hide the first div and display the second div -->
<script>
function show_hideDiv() {
document.getElementById("hide_onclick").style.display = "none";
document.getElementById("hide_onclick").disabled = true;
document.getElementById("show_onclick").style.display = "block";
}
</script>
It's because when you submit a form, it redirects the page to the action attribute. In your case, since you have none, it will refresh the page.
So, you are changing the div2 to visible, but then the page refreshs and goes back to the initial state...
There is a basic difference between type ="submit" and type="button". type="submit" will submit your form and reload the page. Thats why your div2 shows up untill the page load back.
On the other hand type="button" do not submit the page ( page does not reload) , it only calls your show_hidediv() function. My suggestion is to use ajax for this kind of situation where you dont want to reload your page but want to retrieve data from database.
The explanation is as LcSalazar says.
The solution (or perhaps a hack) I found, is using the display code from within the hidden div AGAIN.
Remember, you should keep all the rest of your codes.
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
<!-- keeps the div visible after the page refresh -->
<script>$('#show_onclick').css('display','block');</script>
<!-- Updates from database -->
</div>
I have this piece of HTML:
<div class="pop-up rooster-toevoegen">
<div class="pop-up-container">
<div class="pop-up-header clearfix">
<div class="pop-up-title">
Rooster toevoegen
</div>
<div class="sprite close"></div>
</div>
<div class="pop-up-content clearfix">
<form id="rooster-toevoegen-form" class="form rooster-toevoegen-form">
<div class="afdeling-container">
</div>
<div class="date-container">
</div>
<div class="button-container clearfix">
<button value="" name="rooster-toevoegen-button" class="rooster-toevoegen-button button-green">Toevoegen</button>
</div>
</form>
</div>
</div>
</div>
Now I want a click function on .rooster-toevoegen and exclude all children from this click function EXCEPT the button. Also the button has already a function(submitting the form), this must stay the buttons event handler.
CONTEXT:
This is a pop-up with a form inside. When the user clicks next to the pop-up the pop-up has to close. Not when clicking on the pop-up which happens when I don't exclude the children from the click event. BUT when the user clicks on the button the form has to submit. So the button should not be excluded from the click and perform his own action.
How do I do this?
You can prevent from bubbling to all elements using e.preventDefault(), and manually trigger click on button.
Better way is to bind one more click event only to button.