create div element with jquery is not working - javascript

I'm trying to create element with jquery and loading html file but my code is not working I tried different ways but none of them didn't work for me first code was
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
jQuery("</div>", {"id": "createFreeAccountDiv"}).load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
});
});
this code was not working then I tried this one
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
jQuery("body").append(jQuery("</div>", {"id": "createFreeAccountDiv"}).load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
}));
});
This was also not working then I tried simple one to create element and third one was
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
e.preventDefault();
jQuery.noConflict();
jQuery("body").append(jQuery("</div>", {id: "createFreeAccountDiv"}));
});
Then I saw that div element is not created I check the code and its syntax and its code is right don't know what is the problem.
Note: this code is working fine
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
jQuery("#createFreeAccountDiv").load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
});
});
because I already created div myself in a html file.
Now finally I don't want to create div myself I want to create div with jquery and load html file which has bootstrap modal.

jQuery("</div>", need to be either jQuery("<div></div>", Or jQuery("<div>",
So code need to be:-
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
append(jQuery("<div id='createFreeAccountDiv'></div>").load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
}));
});

$('#element_name').append('<div id"element_id_ex1" name="element_name_ex1"></div>');
or
$("#clickToCreateFreeAccount").on('click',function()
{
$('#element_name').append('<div id"element_id_ex1" name="element_name_ex1"></div>');
});

$(document).ready(function(){
var config="<div>Hi Welcome</div>"
jQuery('body').append(config);
});

Related

Select image by ID

Can you select an image based on id using jQuery? Because when I tried it, it didn't work. Is this the correct way? Thanks
$(document).ready(function () {
$("#imageID").click(function (){
$("#imageID").addClass("className");
});
});
This could be happening because the element is not inside the DOM when you bind the event. Then you could try to bind with jquery using on function and binding the event to body for instance:
$(document).ready(function () {
$("body").on("click", "#imageID", function (){
$(e.target).addClass("className");
});
});
First, check duplicate id's.
Better way:
$(document).ready(function () {
$("#imageID").on('click', function (){
$(this).addClass("className");
});
});
Also, it add new classname only to clicked image, not to all images, so this is right way.
Your problem may occures because you have thow or more tags with #imageID id.
So, more better way is using js-* classes:
<img src="/images/img.png" class="js-my-image" alt="">
Code:
$(document).ready(function () {
$(".js-my-image").on('click', function (){
$(this).addClass("className");
});
});
If image is added after page loads, right code:
$(document).ready(function () {
$(document).on('click', '.js-my-image', function (){
$(this).addClass("className");
});
});
or
$(document).ready(function () {
$(".js-my-image").live('click', function (){
$(this).addClass("className");
});
});

JQuery Mobile, load then change possible?

I'm trying to load an external page and insert it in my HTML. Here is my code :
$(document).ready( function() {
$("#idButton").click( function() {
$(":mobile-pagecontainer").pagecontainer("load","file:///url/to/my/HTMLFILE");
$(document).ready( function() {
$(":mobile-pagecontainer").pagecontainer("change","#pageID");
});
});
});
When I execute it, I need to press the button twice before it change my page. How can I fix this ?
Thanks !
you have wrong syntax. Please check if this works for you.
$(document).ready( function() {
$("#idButton").click( function() {
$(":mobile-pagecontainer").pagecontainer("load","file:///url/to/my/HTMLFILE");
$(":mobile-pagecontainer").pagecontainer("change","#pageID");
});
});

jquery .on(click) not working

i have a link on html
Veja aqui ยป</p>
and i'm using .on() to do a transition and load content from a external file
$(document).on("click", '#instalacoesbutton', function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
any idea why this doesn't work?
if i do:
$("#instalacoesbutton").on("click", function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
it works, for the 1st click, but doesn't after the page has been generated dinamically
Here you go:
jQuery:
$(document).ready(function() {
$("#instalacoesbutton").on("click", function() {
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
});
Try it yourself on jsFiddle
If you want the action to fire on all future elements which match that selector, you can set up a click on the document and look for a clicks on that item. This would look something like:
$(document).click(function (e) {
if ($(e.target).is(".testSelector")) {
// do stuff to $(e.target)
}
});

Can't hide element on click for some reason

I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?
I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/
I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});
It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle
As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});

jquery on() with addClass/removeClass

I have this script which needs to work on an ipad. It was working on chrome with live, however, moving it to on makes it unresponsive.
Any ideas, I would be grateful!
$("#clickAll").on("click", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$("#clickAll.active").on("click", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});
try this
$("#clickAll").on("click", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
updated
as suggested
$(document).on('click',"#clickAll", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
since it was working with live() i assume your element with id clickAll is added dynamically so try this
$(document).on("click","#clickAll", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$(document).on("click","#clickAll.active", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});
you can replace the $(document) selector with your closest element to #clickAll element which will be more efficient
This will delegate the event to the body and it will be caught when it bubbles up the DOM.
$('body').on("click", "#clickAll", function(){
$(".welcome1poi").show();
$(this).addClass("active");
});
$('body').on("click", "#clickAll.active", function(){
$(this).removeClass("active");
$(".welcome1poi").hide();
});
Are you adding and removing the "active" class in order to create a toggle effect? If so, try .toggle(), like so:
$('#clickAll).toggle(
function() { $('.welcome1poi').show(); },
function() { $('.welcome1poi').hide(); });

Categories

Resources