Develop Reference

.focus() not firing for elements added to the DOM with JQuery [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
I'm trying to use .focus () after adding more input fields with jQuery, but it only works with the input field already present in HTML and not with the ones added.
For example, if I click on the input field that is in the form, an alert will appear, but if I add more input fields and click on them, nothing will appear.
Is there a solution?
Thanks! :)
$(document).ready(function(){
var cont = 1;
$( "#add-campo" ).click(function() {
cont++;
$( '<div class="form-group" id="campo'+cont+'"> <label>Campo: </label> <input type="text" name="titulo[]" placeholder="Digite aqui"> <button id="'+cont+'" class="btn-apagar"> - </button> </div>' ).appendTo( "#formulario" );
});
$('form :input').focus(function() {
alert( "Handler for .focus() called." );
});
$( "form" ).on( "click", ".btn-apagar", function() {
var button_id = $( this ).attr("id");
$( '#campo' +button_id+'' ).remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>ADICIONAR CAMPOS</h1>
<form id="add-pub" method="POST">
<div id="formulario">
<div class="form-group">
<label>campo: </label>
<input type="text" name="titulo[]" placeholder="Digite aqui">
<button type="button" id="add-campo"> + </button>
</div>
</div>
<div class="form-group">
<input type="button" name="PubRot" id="PubRot" value="PUBLICAR">
</div>
</form>

Change this...
$('form :input').focus(function() {
To this...
$(document).on('focus', 'form :input', function() {
This will cause all future-created elements to retain that binding. These are called Delegated Event Handlers. The jQuery POD explains both the problem and the solution...
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated event handlers to attach event handlers....
The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready. (Source: jQuery on Handler Documentation.)
Full working demo with your code sample...
$(document).ready(function(){
var cont = 1;
$( "#add-campo" ).click(function() {
cont++;
$( '<div class="form-group" id="campo'+cont+'"> <label>Campo: </label> <input type="text" name="titulo[]" placeholder="Digite aqui"> <button id="'+cont+'" class="btn-apagar"> - </button> </div>' ).appendTo( "#formulario" );
});
$(document).on('focus', 'form :input', function() {
alert( "Handler for .focus() called." );
});
$( "form" ).on( "click", ".btn-apagar", function() {
var button_id = $( this ).attr("id");
$( '#campo' +button_id+'' ).remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>ADICIONAR CAMPOS</h1>
<form id="add-pub" method="POST">
<div id="formulario">
<div class="form-group">
<label>campo: </label>
<input type="text" name="titulo[]" placeholder="Digite aqui">
<button type="button" id="add-campo"> + </button>
</div>
</div>
<div class="form-group">
<input type="button" name="PubRot" id="PubRot" value="PUBLICAR">
</div>
</form>

How can I use val of "contenteditable 1" to update "contenteditable 2" with "keyup" event?

I am struggling to achieve a solution to my problem:
<div id="editable-content">
<span id="static1" class="non-editable">1-800-</span>
<span class="edittext" id="block1" class="editable" placeholder="HELLO" contenteditable="true"autofocus></span>
<div id="editable-content">
<span id="static2" class="non-editable">1-800-</span>
<span class="edittext" id="block2" class="editable" placeholder="HELLO" contenteditable="true"autofocus></span>
I want to use the value of #block1 to update #block2 on a keyup event.
Means: As soon as user types into #block1 the same text simultaneously appears in #block2.
This my JS so far but it doesn't do what i want it to do:
$( function() {
function updateTextarea() {
$( '#block2' ).val( $( '#block1' ).val());
}
$( '#block1' ).keyup( updateTextarea );
});
What do I do wrong? Thank you so much in advance!!

change this line:
$( '#block2' ).text( $( '#block1' ).text());
Only form elements does have the value attribute so that can be get via .value from javascript or .val() method of jQuery.
Although contenteditable attribute lets you enter text in the element but that is just textContent of that element not value.

Try with this its a sample code hope this will help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type="text" id="ch1" value="" /><br/>
<input type="text" id="ch2" value="" />
<script>
$(document).ready(function(){
$("#ch1").keyup(function(){
var test = $("#ch1").val();
$("#ch2").val(test);
});
});
</script>
</body>
</html>

jQuery, submit is not cancelling on form

I have a form which I am trying to use JS to cancel, so that I can submit it using Ajax.
However I just started and as I made the form and tested to see if the submission is cancelled/return's false I discovered that it did not. I checked other threads/posts made but none helped me. This is my form bellow, followed by the .js file. The console in chrome has not given me any errors either.
EDIT: I forgot to mention that the alert in the .js file is not coming up either.
<form method="post" class="form-horizontal form-bordered" id="user-data-form">
<div class="form-group">
<label class="col-md-3 control-label" for="oldpassword">Old Password</label>
<div class="col-md-6">
<input type="password" id="oldpassword" name="oldpassword" class="form-control" placeholder="Old Password">
</div>
</div>
<div class="form-group form-actions">
<div class="col-md-9 col-md-offset-3">
<!-- Submit element -->
<input type="submit" class="btn btn-effect-ripple btn-primary" value="Update">
<!-- END Submit element -->
</div>
</div>
</form>
And the JS file,
$( '#user-data-form' ).submit( function(event) {
alert( "Handler for .submit() called." );
event.preventDefault();
return false;
});

I suggest you try making the event.preventDefault(); the first thing that runs as the alert maybe allowing the normal button pressing function of a HTML form to get run while the alert sits on screen
$( '#user-data-form' ).submit( function(event) {
event.preventDefault();
alert( "Handler for .submit() called." );
return false;
});
As per your comment:
Add the javascript before the
<script src="js/test.js"></script>
</body>
</html>
otherwise its not actually part of the DOM and wont get run
As per your second comment
Try putting your code inside a .ready like this. This ensures that the document is completely built before attempting to attach the .submit handler. And stops it attempting to add the handler before there is an object to attach it to in the DOM.
$( document ).ready(function() {
$( '#user-data-form' ).submit( function(event) {
event.preventDefault();
alert( "Handler for .submit() called." );
return false;
});
});

Try this:
In your html:
<input type="submit" class="btn btn-effect-ripple btn-primary" value="Update" id="SUBMIT">
JS:
$('#SUBMIT').on('submit', function(e) {
e.preventDefault();
var confirm = confirm('Message');
if(confirm === true){
//do something
}else{
return false;
}
});

Try changing your input submit to button and make an id. You can delete your id in your form and put that id in class.
<form method="post" class="form-horizontal form-bordered user-data-form">
<button id="submit" type="submit" class="btn btn-effect-ripple btn-primary" value="Update"></button>
OR
<form method="post" class="form-horizontal form-bordered user-data-form">
<input id="submit" type="submit" class="btn btn-effect-ripple btn-primary" value="Update">
Then in your javascript calling the submit button
$('form.user-data-form #submit').click(function(e){
e.preventDefault();
alert( "Handler for .submit() called." );
return false;
});
Hope that helps

Dynamically add validation to form via javascript

I´m stuck. I can´t edit the html for the form, so i need to add parsley.js validation attributes after page load, but parsley doesn´t seem to run if i use it like this:
var myForm = "#theForm";
jQuery( document ).ready(function() {
if (jQuery(myForm).length) {
jQuery( '#user_email' ).attr( 'data-parsley-equalto', '#user_email_validate');
jQuery( myForm ).parsley();
}
});
Exchanging the validation line with the following works fine, so it seems to be a problem with the 'data-parsley-XXX' part:
jQuery( '#last_name' ).attr( 'minlength', 2);
What am i missing? Thanks a lot.

#user33958 is this what you're after?
<form id="theForm">
<input id="user_email" placeholder="Email" />
<input type="submit" />
</form>
<script>
jQuery( document ).ready(function() {
var myForm = jQuery("#theForm");
if (jQuery(myForm).length) {
myForm.parsley();
jQuery("#user_email").parsley().addConstraint('minlength',2);
}
});
</script>
See working codepen:
http://codepen.io/ds0001/pen/NPmWoZ?editors=101

Set focus after an alert message in jquery

I'm trying to set the focus in a input after an alert box appear. I have problem to set the focus on my field, ref.
My code is simple:
Javascript
var toFix = true;
$( "#add" ).click(function(e) {
if(toFix){
if (confirm('Not valid')) $( "#ref" ).focus();
e.preventDefault();
}
});
HTML:
<input class="input-text submit" type="submit" id="add" name="submit" value="Add" style="text-align: center"/>
<input class="input-text" type="text" name="ref" id="ref">
EDIT:
Demo

Don't use a confirm:
var toFix = true;
$( "#add" ).click(function(e) {
if(toFix){
alert("fix it");
$( "#ref" ).focus();
e.preventDefault();
}
});
http://jsfiddle.net/stevemarvell/fEmfa/

Working code at JSFIDDLE.
Just remove if(tofix).