Develop Reference

create div element with jquery is not working

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);
});

jQuery - Tabbed Content - Open on Selected Tab?

I've created some tabbed content. Is there any way for me to decide which tab I want open by changing the URL? I'm sure I've seen something similar before but can't find it!
I've created a fiddle here: http://jsfiddle.net/sW966/
The default tab is tab 1. But for example, if the URL was http://jsfiddle.net/sW966/#tab-2 the page would load with tab 2 open?
Thanks for any help, struggling a little :)
$(document).ready(function () {
$(".tab").click(function () {
$(".tab").removeClass("active");
$(this).addClass("active");
$("#tabbed-content .tab-content").hide();
$($(this).attr("href")).show();
});
});

Why not change your JS to:
Note this wont work in jsfiddle due to the way it works.
$(document).ready(function () {
if(window.location.hash){
tabChange($('.tab[href=#'+window.location.hash+']'));
}
function tabChange(tab){
$(".tab").removeClass("active");
tab.addClass("active");
$("#tabbed-content .tab-content").hide();
$(tab.attr("href")).show();
}
$(".tab").click(function () {
tabChange($(this));
});
});

You can try this:
Working fiddle here
Replace attribute "href" to "name"..
$(document).ready(function () {
$(".tab").click(function () {
$(".tab").removeClass("active");
$(this).addClass("active");
$("#tabbed-content .tab-content").hide();
$($(this).attr("name")).show();
});
});
Good Luck....

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: .index() returns -1

Here's main part of html:
<div id="table">
<div class="table_item">asd</div>
<div class="table_item">asd</div>
<div class="table_item">asd</div>
</div>
And JS (JQuery):
$(document).ready( function()
{
$(".table_item").click( function()
{
alert($("#table").index($(this)));
});
});
click handling works but I ALWAYS get -1 from .index.
trying simply $(this).index(); shows the same result.
Please help! What's wrong with the code?

Do this instead:
$(document).ready( function()
{
var ti = $('.table_item');
ti.click( function()
{
alert(ti.index(this));
});
});
EDIT: Someone had a post that was deleted that was correct, and I think a little better than my code above:
$(document).ready( function()
{
$('.table_item').click( function()
{
alert($(this).index());
});
});
Working examples of both solutions: http://jsfiddle.net/FishBasketGordo/rx5e7/

You need to call index on a collection, in this case divs with class table_item
alert($(".table_item").index(this));

Since you are attaching a click() listener to $(".table_item"), you can reference the object by using $(this).
Try:
$(document).ready( function()
{
$(".table_item").click( function()
{
alert($(this).index());
});
});