Do anyone has similar experience? I would like to load an external file into current page by using .load("...") function. After loading, how can I trigger the click on an image in the <div id="tab-3-list">?
The script
$("#tab-3-list img.coupon_list").on("click", function (e) {}
doesn't function. If I embed the content of list.html into the current body, the above script works.
<html lang="en" class="ui-mobile">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<section id="home" data-role="page">
<article data-role="content">
<div id="home-content"></div>
</article>
<!-- content -->
</section>
<!-- home -->
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
</script>
</body>
</html>
External file list.html
<div id="tab-3-list">
<div class="ui-grid-a">
<div class="ui-block-a">
<img id="c01" class="coupon_list" src="/images/coupon/c01.png">
</div>
</div>
<!-- /ui-grid-a -->
</div>
<!-- /tab-3-list -->
Try to use event-delegation at this context since you are loading the DOM elements at runtime,
$("#home-content").on("click","#tab-3-list img.coupon_list",function (e) {
e.preventDefault();
alert(this.id);
});
try this..
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html", function(){
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
});
</script>
load uses ajax and thus takes sometime to load data from external page. When you are attaching click event to img.coupon_list, it's not even present in DOM ( in page ).
Try this,
$("#home-content").load("list.html", function () {
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
This is attaching click only when data from load is returned and added to the DOM.
Use event delegation - .on(), and to trigger click event use .trigger()
$(document).ready(function() {
$("#home-content").load("list.html",
function(){
$('#tab-3-list img.coupon_list').trigger('click');
});
$("#home-content").on("click","#tab-3-list img.coupon_list", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
-just put event in live mode , it's work after reload :
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#home-content").one("load",function(){
// everytime an image finishes loading
}).each(function () {
if (this.complete) {
// manually trigger load event in
// event of a cache pull
$(this).trigger("click");
}
});
$("#home-content #tab-3-list img.coupon_list").live("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
}); </script>
Related
I'm trying to load a HTML file into a div section, but the load() method doesn't seem to work as when I click the link, the html file opens in a new tab instead of loading into the div tag.
The script:
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
$('#main-content').load($(this).attr("href"));
return false;
});
});
</script>
The 'a' tag:
<li>ABOUT</li>
Where I want my html file to be loaded:
<div class="col-sm-9 blog-main" id="main-content">
...
</div>
How do I make the load() method work?
I'm using Chrome on Windows.
That's the default behavior of a tag. Instead of setting the html.file to be loaded in href attribute, its better to keep it in custom attribute.
ABOUT
And in JavaScript,
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#main-content').load($(this).attr("data-page"));
return false;
});
});
</script>
Plunker sample
You can use preventDefault to stop default action of the event to triggered.
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(event){
event.preventDefault();
$('#main-content').load($(this).attr("href"));
return false;
});
});
</script>
try
about.html ensure that the file is in the root of the project
<li>ABOUT</li>
<div class="col-sm-9 blog-main" id="main-content"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(event){
event.preventDefault();
$('#main-content').load($(this).attr("href"));
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
$('#main-content').load($(this).attr("href") + ' #elementSelectorThatYouWantToLoad');
return false;
});
});
</script>
You have to specify an DOM element that you want to load like,
$('#main-content').load($(this).attr('about.html #body');
understand me
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$('.deleteMe').live('click', function(){
$(this).parent().remove();
$('#contributionList').listview('refresh');
});
$( document ).ready(function() {
$('#addContribution').click(function () {
var newAmount = $('#contributionAmount').val();
if (newAmount) {
$('#contributionList').append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>').listview('refresh');
$('#contributionAmount').val('');
} else {
alert('Nothing to add');
}
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<ul data-role="listview" id="contributionList" data-split-icon="delete" data-split-theme="d">
<li id="l1"><a>5.00</a><a id="1" class="deleteMe"></a></li>
<li><a>10.00</a><a class="deleteMe"></a></li>
<li><a>15.00</a><a class="deleteMe"></a></li>
<li><a>20.00</a><a class="deleteMe"></a></li>
<li><a>25.00</a><a class="deleteMe"></a></li>
<li><a>50.00</a><a class="deleteMe"></a></li>
<li><a>100.00</a><a class="deleteMe"></a></li>
</ul>
<br />
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="text" placeholder="Add new Amount" id="contributionAmount" />
</div>
<div class="ui-block-b">
<input type="button" value="Add" id="addContribution"/>
</div>
</fieldset>
</div>
</div>
</body>
</html>
^ this code is work in website but when i add it to HTML like this is never work .. i don't know why !
look at the last answer in down someone sent me a link is work !
but when i add it in HTML not work
------- >< >< ><
some people say u don't use $(document).ready(function() {});
and some people say you can use $('ID').on('click',function(){})
^ i did that in my computer it ain't work ! but i didn't test it in website
<><><----------
the problem maybe in my laptop Mac Os X if the code is work then it
should work when i add it in HTML is not work
basically code work in website but in HTML inside not work !
<script>
$( document ).ready(function() {
$('#addContribution').click(function () {
var newAmount = $('#contributionAmount').val();
if (newAmount) {
$('#contributionList')
.append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>')
.listview('refresh');
$('#contributionAmount').val('');
} else {
alert('Nothing to add');
});
});
</script>
The script didn't work because the dom element that you are binding ie;'#contributionAmount' is not available when the script is parsed by browser. document.ready event would be compiled by browser once the html dom is ready.
You have to register your click event inside document.ready event. document.ready event call after DOM is loaded. So when your older script executed DOM is not ready so you can't register your event.
If you don't want to do this jQuery ready event, you can bind a function to an event using on, Event Handler Attachment jQuery .on()
<script>
$('#addContribution').on('click',function() {
var newAmount = $('#contributionAmount').val();
</script>
This code will help as it works fine
$( document ).ready(function() {
$('#addContribution').click(function () {
var newAmount = $('#contributionAmount').val();
if (newAmount) {
$('#contributionList').append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>').listview('refresh');
$('#contributionAmount').val('');
} else {
alert('Nothing to add');
}
});
});
check out this fiddle http://jsfiddle.net/uiupdates/NXrRp/492/
I'm newbie in jquery. I use this code for changing the current image on hover or click by another with jquery. But it dosn't work!!
<head>
<title> Visite </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-2.1.1.min.js"> </script>
<script>
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
})
</script>
</head>
<body>
<img src="logo11w.png" alt="photo" />
</body>
</html>
i give this example from http://jsfiddle.net/afzaal_ahmad_zeeshan/8H4MC/
Try wrapping the jQuery code in a document ready
$(document).ready(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
});
});
Or alternatively
$(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
});
});
This will only give you the mouse over. You may need to pass in the mouse out function as well: hover
$(function() {
$('img').hover(function () {
$(this).attr('src', 'o.184684.jpg');
}, function() {
//mouse out function
});
});
With the following piece of code:
<html>
<head>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$j = JQuery.noConflict();
function test() {
$j("#li1").on(
"click",
function() {$j.ajax({
url : "user/create_user_view",
success : function(result) {
$j("#div1").html(result);
}
});
});
}//test()
$j(function(){
test();
});
</script>
</head>
<body>
<ul>
<li id="li1">li1</li>
<li id="li2">li2</li>
</ul>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
Actually the result of ajax call is a html file which is indeed a form,
I want to register events to the added elements of .html file,
I know about $("parent-selector").on("event","child-selector",callback(){
// code here
});
How to register js events to elements added dynamically through ajax in div1?
Update:
My question is using $("parent-selector").on("event","child-selector",callback(){
// code here
});
will register events only to direct children of #div1 or its descendents too?
You can easyli attach eventhandlers to dynamic elements, you have to write it a little bit diffrent:
$('body').on('click', '.myDynamicElement', function(ev) {
// Do your stuff in here...
});
Take a look into this Demo, Cheers Jan
I am new to web-designing. I have this sample code which toggles a div when we click anywhere on the window.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
</script>
</body>
</html>
How can I add an image and change the image for show and hide? I have an '>' icon. When I click on it, div should appear and '>' should change to '<'
$('#buttonid').on('click', function () {
$('#toggle').toggle('slide');
});
add a button with an unique id like this
<button id="buttonid">click to toggle </button>
I think you can do as follow
<img src='source:<' id='imageid' data-othersource='source:>' />
You can declare an image like that with the two sources and then switch the src in jQuery.
//wait for the document to be fully loaded to execute
$(document).ready(function(){
//use event delegation
$(document).on('click','#imageid',function(){
var $this= $(this);
$('#toggle').toggle('slide',function(){
//swap src of the image on toggle is completed
var imgsrc = $this.attr('src');
$this.attr('src',$this.data('othersource'));
$this.data('othersource',imgsrc)
});
});
});
This way if for some reasons, you have to change the images, you don't need to get back to script, you just need to change the html.
http://jsfiddle.net/AmqcY/
Note: event delegation is not necessary in this case, but still i think it's important you read about that part for furthur use.
instead of registering the click handler to document, register it to a button
if you have a button with id mybutton then
//dom ready handler so that the script is executed after the dom is loaded
jQuery(function(){
//register the click handler to an element with id mybutton
$('#mybutton').click(function () {
$("#toggle").toggle("slide");
});
})
Demo: Fiddle
By id:-
<button id="button_id">click to toggle </button>
$('#button_id').click(function() {
$( "#toggle" ).toggle( "slide" );
});
By class:-
<button class="button_class">click to toggle </button>
$('.button_class').click(function() {
$( "#toggle" ).toggle( "slide" );
});
Try like this
$('#yourbuttonId').click(function () {
$("#toggle").toggle("slide");
});
Demo
Try this Code
$('body').on('click',function(){
$('#toggle').toggle('slide');
});