I have this jquery script, and it does not work in head tag.
<script type="text/javascript">
$(window).load(function() {
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
}
</script>
But if I put the code below the form it usually works.
I want to put it in a .js file. But does not work in the head tag, only if I include after the form.
It is possible to make this code work in head tag?
You should initialize jQuery like this instead:
$(document).ready(function() {
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
});
Probably the form is not rendered before .load event is fired.
Check what window is, but you might want to write:
<script type="text/javascript">
$(document).ready(function() {
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
});
</script>
Check this link
If you don't use the .ready approach, it is going to execute the code, search for #target and find nothing, because the render has not passed the object that you are targeting so it is not able to find it
Try this?
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on("submit", "#target", function(event) {
alert("Handler for .submit() called.");
event.preventDefault();
});
});
</script>
Related
I have a function that is triggered on an inline onclick.
What I want is for that function to get called only once but don't know how to do that with an inline onclick. It's working at the moment but runs everytime the user clicks rather than just once.
This is how I have it:
HTML
<div class= "container" onclick="modal('#modal')"></div>
I have tried having it as a Jquery function as follows and remove the above click but that is not working either:
$(".container").on( "click", modal( '#modal') {
alert( "The event happened!" );
});
Any idea how to make it so the function only runs once?
Thank you
If you wish to use jQuery's one(), you'll need to remove the onclick from the HTML, and change the JS to read:
$( ".container" ).one( "click", function() {
alert( "The event happened!" );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "container">Container</div>
This way, the alert() will only show on the first click.
If you wish to use the on() as stated in your question, use $(this).off('click'); to remove the event listener after the fist press:
$( ".container" ).on( "click", function() {
alert( "The event happened!" );
$(this).off('click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "container">Container</div>
i have an external file profile.php, i want to load it into a sub page id profile after clicking a link.. i have tried the code below but i did not see any been displayed after the click event, the clicked event is triggered because i have tested it alert , there is no error in console i think i'm missing something please help out. thanks
$(document).on("click", "#profilel",function(){
$( ":mobile-pagecontainer" ).pagecontainer( "load", "profile.php" )
});
Try this one
$(document).on("click", "#profile",function(){
$( ":mobile-pagecontainer" ).pagecontainer( "load", "profile.php" )
});
or
$("#profilel").click(function(){
$.get("profile.php")
.done(function(data){
$( ":mobile-pagecontainer" ).html(data);
});
});
I am loading a page into a div like this:
<script type="text/javascript">
$(document).ready(function(){
$("#siteloader").html('<object data="http://mysite/form1.php" />');
$( "#myform" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
});
</script>
I can see with firefox that the page loaded is on a frame.
My question is, how can I access anything on the loaded page with jquery ?
You can try using jQuery .load() to do the same thing but only return the element that you need and not withing a frame. Jquery .load But to answer your question try using the .contents() to get the information you need. jQuery .contents
$('#siteloader').load("mysite/form1.php")
.success(function(){
$( "#myform" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
})
EDIT: added code
I try to execute a function when I click on a specific div ID and nothing happens, help! Example:
$( "#jwplayer-1_wrapper" ).click(function() {
alert( "Handler Clicked" );
});
-> Full example here <-
Check this
http://jsfiddle.net/2mK7Z/22/
$(document).ready(function(event)
{
$('#jwplayer-1_wrapper').mousedown(function() {
alert('click detetced');
});
});
I think this is the problem you are experiencing: Track a click on a flash movie (object / embed) with jQuery
That is - the embedded flash object steals the click event, and jquery will never see it.
Do you create the element dynamically? It could be that the element doesn't exist at document ready. Try:
$("body").on("click", "#jwplayer-1_wrapper", function() {
alert("Handler clicked");
})
Otherwise, check the ID and make sure it's correct.
You have to wait for the DOM to become ready. Use jQuery(document).ready
$(document).ready(function() {
$( "#jwplayer-1_wrapper" ).click(function() {
alert( "Handler Clicked" );
});
});
<script>
$(document).ready(function(){
$( window ).load(function() {
$( "#check" ).val('hurray_checked');
});
});
</script>
<input id="check" type="checkbox" name="should_be_checked_when_pageloads" value="" />
So what all i want is when the page loads, the below field should become
<input id="check" type="checkbox" name="should_be_checked_when_pageloads" value="hurray_checked" />
But my above code is not working, can anyone please let me know how to check a field with a value when page loads ?
use jquery's .prop
$(function(){
$('.check').prop('checked', true);
});
dont use load
load is called when all assets are done loading, including images. ready is fired when the DOM is ready for interaction.
<script>
$(document).ready(function(){
$( ".check" ).attr("checked","checked").val('hurray_checked');
});
</script>
try below..for class u have to take "." and for id u should take"#"
<script>
$(document).ready(function(){
$( window ).load(function() {
$( ".check" ).val('**hurray_checked**');
});
});
</script>
Either you use this:
$( window ).load(function() {
$( ".check" ).val('**hurray_checked**');//the selector you are should be class
});
This will add the value whent the window is loaded
OR
$(document).ready(function() {
$( ".check" ).val('**hurray_checked**');
});
This will add the value when the document is ready(loaded)
Use . inplace of # like
$(document).ready(function() {
$( ".check" ).val('hurray_checked');
// ----^-- . in place of # as you used class in checkbox
$( ".check" ).prop('checked',true);// to check the checkbox
});
Read prop()
Working Demo
you need not put you code in $( window ).load,
$(document).ready(function(){
$( "#check" ).val('hurray_checked');
});
will work
Use
$(document).ready(function(){
$('#check').prop('checked', true);
});
Fiddle
$(window).load event is called before $(document).ready, and you are defining it after it has happened. That means your code never gets called.
You must either remove $(window).load wrapper, or $(document).ready for it to work as you expect.