I have the following code that I run whenever the .information element is clicked. I am trying to add the aboutMe.html document to the #text element when the .information is clicked:
$(".information").click( function() {
$.get("aboutMe.html"), function(data){
$("#text").html(data);
}});
For some reason the document is not added to the page when .information is clicked.
Your parentheses and braces are wrong. It should be:
$(".information").click( function() {
$.get("aboutMe.html", function(data){
$("#text").html(data);
});
});
Your callback function was outside the argument list of $.get().
Hope this will work for ýou
$(function() {
$('.information').click(function(){
$('#text').load("aboutMe.html");
});
});
Related
I'm trying to modify an iframe/object content adding a script into it. At the moment, I have something like this:
// "script" is a node with an self-called function as its content
$(function() {
$('object, iframe').each(function() {
this.addEventListener('load', function() {
this.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
And it works as expected (the script does its job and it is added to the DOM of the iframe) but the problem comes when I try to do it the "jQuery" way:
// "script" is a node with an self-called function as its content
$(function() {
$('object, iframe').each(function() {
$(this).on('load', function() {
this.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
In the previous code, the script won't be added to the dom of the iframe.
Is there any reason why the .on('load') version is not working? What can be wrong? Am I missing something?
PS: The iframe is same-origin.
In each case, the inner function's this might not always be what you want it to be. I'd try:
$(function() {
$('object, iframe').each(function () {
$(this).on('load', function (event) {
event.target.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
Cf. https://api.jquery.com/event.target/
On Ajax Success, li element is appended to ul.
$.ajax({
..
success: function (response) {
response.data.forEach(function (x) {
$("#ulMain").append('<li class="liSub">' + x + '</li>');
}
});
It creates sth like this:
<ul>
<li class="liSub">ABC</li>
<li class="liSub">BCF</li>
</ul>
I want the dynamically added li elements to fire an alertbox on click.
But the code below is not being hit.
$(document).ready(function () {
$(".liSub").on("click", function () {
alert("Fired");
});
});
Interestingly, If I run the document.ready section of the code using F12 - Console, it works. What stops it run normally, and lets it run through console?
You missed . prefix for class and use event delgation for created dynamic dom elements
$("ul").on("click", '.liSub', function () {
alert("Fired");
});
Since it is an element loaded dynamically, try delegating it:
$(document).ready(function () {
$("body").on("click",".liSub", function () {
alert("Fired");
});
});
It is because when your page is ready, the ajax call is not finished. You can try this :
$(document).ready(function () {
$("#ulMain").on("click",".liSub", function () {
alert("Fired");
});
});
It will bind the click to the #ulMain which exists at the execution and will delegate the event to .liSub at the moment of the click. It creates only one binding which is also better for global performance.
I've got this function:
$(document).ready(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
My page loads content with favourite buttons, but after Ajax call and generated additional new content the function doesn't work when you click new content's buttons. What could be not right?
That is because you are using dynamic content.
You need to change your click call to a delegated method like on
$('.post_button, .btn_favorite').on('click', function() {
or
$("body").on( "click", ".post_button, .btn_favorite", function( event ) {
Instead of this:
$('.post_button, .btn_favorite').click(function() {
do this:
$(document).on('click','.post_button, .btn_favorite', function() {
on will work with present elements and future ones that match the selector.
Cheers
class-of-element is the applied class of element. which is selector here.
$(document).on("click", ".class-of-element", function (){
alert("Success");
});
If you know the container for .post_button, .btn_favorite then use
$('#container_id').on('click', '.post_button, .btn_favorite', function () { });
so if '.post_button, .btn_favorite' are not found then it will bubble up to container_id
else if you don't know the container then delegate it to document
$(document).on('click', '.post_button, .btn_favorite', function () { });
Reference
I am not sure if I am getting your question right but you may want to try..
$.ajax({
url: "test.html"
}).done(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
Just try to paste your code inside done function.
Hope it helps :)
EDIT:
I also notice you are missing }); on your question.
The following worked for me
$(document).ready(function(){
$(document).bind('contextmenu', function(e) {
if( e.button == 2 && jQuery(e.target).is('img')) {
alert('These photos are copyrighted by the owner. \nAll rights reserved. \nUnauthorized use prohibited.');
return false;
}
});
});
You need to bind the jQuery click event once your ajax content is replaced old content
in AJAX success block you need to add code like here new response html content one a tag like
Click Me
So you can bind the new click event after change the content with following code
$("#new-tag").click(function(){
alert("hi");
return false;
});
How can I achieve this?
for each pages I have attached a unique class-name so I can target them by css later.
body.pageHome
about.pageAbout
contact.pageContact
I want to run a function but only targeting the homepage.
eg.
if($('body').hasClass('pageHome')) {
callMe;
}
function callMe() {
alert('I am Home!');
}
It looks like you're close. To call callMe, you'll want parenthesis to indicate that it's a function call:
if($('body').hasClass('pageHome')) {
callMe();
}
Your forgot the parenthesis when you called callMe:
function callMe() {
alert('I am Home!');
}
if($('body').hasClass('pageHome')) {
callMe();
}
Does that help?
Concept should work fine as long as you are wrapping code in
$(function(){ /* run code*/ })
and you need to add "()" to callme();
This function is supposed to change the background color of the object being clicked
function colorMe(){
$(this).css('background-color', 'red');
}
I call it like this
$('.colorme').click(colorMe);
and it changes the background of this div
<div class="colorme">Color Me</div>
The problem is that I want to do something else before running colorMe. So I can't use just $('.colorme').click(colorMe);. What I'm trying to do is something like this
$('.colorme').click(function(){
alert('something happens first, then colorMe is called');
colorMe(); //I call colorMe here..
$(this).colorMe(); //I also tried this, but it's not working
});
but it's not affecting the div. I think it lost track of the div to affect. Do I need to pass it and how?
function colorMe(elt){
$(elt).css('background-color', 'red');
}
$('.colorme').click(function(){
alert('something happens first, then colorMe is called');
colorMe(this); //I call colorMe here..
});
To call a function on a jQuery object like you did here
$(this).colorMe()
you would have to build a plugin (I edited it to add a class)
// css
.red {
background: red;
}
// js
(function($) {
$.fn.extend({
colorMe: function() {
this.addClass("red");
},
unColorMe: function() {
this.removeClass("red");
}
});
})(jQuery);
Then you would be able to do
$(".a_class").colorMe();
$(".a_class").unColorMe();
You should use the .addClass() method.
function colorMe(element){
element.addClass('my-red-class');
}
$('.colorme').click(function(){
colorMe(this);
});
And in your css file you have a class called 'my-red-class' (use a better name!)
.my-red-class { background-color: red; }
And you can also easily remove the css:
function unColorMe(element){
element.removeClass('my-red-class');
}
function colorMe(){
$(this).css('color', 'red');
}
using call()
$('.colorme').click(function(){
alert('something happens first, then colorMe is called');
colorMe.call(this);
});