We Keep Coding

jQuery selector for element not on page

I have the following jQuery on the page:
$('#nav-icon1,#nav-icon3').click(function(){
});
And corresponding HTML like this:
<div id="nav-icon3" class="">
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
</div>
There's no nav-icon1 anywhere on the page, but when I change the jQuery to be this:
$('#nav-icon3').click(function(){
});
It stops working.
What am I missing? Thanks!

it's necessary attach that event to your div? check if your spans are position "relative" because if they are "absolute" your div "nav-icon3" may not be visible with height:0px.
another way to add events is using "bind"
$(function(){
$("#nav-icon3").bind('click', function()
{
// some code...
});
});
or
$(function(){
$("#nav-icon3").bind('click', _onNavClick);
});
function _onNavClick(event)
{
// some code...
}

It seems different error, what you are doing is working just how it is. Check it here jsfiddle.net/ed9xsh62/ Check your console or share URL to check the exact error.

$(function(){
$( "#nav-icon3" ).click(function() {
//code goes here
//can do a simple alert to test the function
});
});
Could be a possibility that you just did not have your code in document.ready function (I used the shorthand version). I tried your code and it worked perfectly as long as it was in the document.ready function.

jQuery function to only run on the element clicked

I'm trying to implement an accordian style box on some content. However there are 4-6 of these boxes on 1 template, all with different classes for obvious reasons. However I want to try and make the code as easy to read as possible and I don't want to duplicate the code for each class name. I'm assumung jQuerys (this) method would work but i'm not 100% sure how to use it.
Here is my JS code:
<script type="text/javascript">
$(document).ready(function(){
$(".block-50_hoverHeader").click(function (){
//alert("clicked");
$(".scrollText").slideToggle(1000);
});
});
</script>
So the .scrollText class is the div that holds all the content which needs to be displayed after the onClick function. But currently when I click the header all the .scollText divs appear on the page. So i want it to only appear on the parent header div that is being clicked.
Here the HTML:
<div class="block-50 left textHoverWrapOne">
<img src="" alt="" /> (Image working as BG Image)
<div class="block-50_hoverHeader"><p>This is a header!</p></div>
<div class="block-50_textHoverOne trans_click scrollText">
This is the content that needs to be displayed after the
</div>
</div>

Find the scrollText relative to the clicked block-50_hoverHeader element. In this case it is the next sibling, so you can use .next()
Inside the event handler this points to the element in which the handler is registered, in this case it is the block-50_hoverHeader element, so we can find the next scrollText using $(this).next()
jQuery(function ($) {
$(".block-50_hoverHeader").click(function () {
$(this).next().slideToggle(1000);
});
});
Demo: Fiddle

There are a number of ways to accomplish this. I prefer to grab the shared parent and then use find as I find this is a bit less likely to break due to minor modifications to the html structure.
$(".block-50_hoverHeader").click(function (){
$(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000);
});

Why not targeting the whole div??
jQuery(function ($) {
$(".block-50").click(function () {
$(this).find('.scrollText').slideToggle(1000);
});
});

Trouble with Javascript show when element is outside of the trigger

I am trying to show a div on click on an anchor, the issue is the anchor is inside an element and the div that needs to be shown is outside of this element. There are multiple divs of the same class on the page so I only want to show the associated one.
The markup is:
<div class="wrapper">
<div class="trigger">
Change
</div>
<div class="content">
<p>Content to be shown when Change is clicked</p>
</div>
</div>

Is that what you want to do? (fiddle)
// dom ready
$(function() {
$('a.change').on('click', function() {
// wrapper div
$(this).parent()
.next() // .content div
.show();
return false; // prevent the link to be followed
});
});

With jQuery you can do it like this:
$('a.change').click(function(e) {
e.preventDefault();
$(this).parent().next().toggle();
});
jsFiddle example

is this what you mean?
$(".content").hide();
$("a.change").click(function(){
$(".content",$(this).closest(".wrapper")).show();
});
Live demo :​
http://jsfiddle.net/dfkge/

Got to the parent and get the correct div e.g.
$('a.change').click(function(event){
event.preventDefault();
$(this).parents('.wrapper').children('.content').show()
}
This way you don't have to worry how deeply embedded anchor is, or where is content (before, after) in relation to anchor
Added a jsFiddle, showing divs with different structures, working with same code
http://jsfiddle.net/NWqcq/11/

Selecting parent element of class using jQuery

JS:
$(function(){
$(".remove").click(function(){
$("<need the right selector>").hide();
});
});
HTML:
<div class="tag-collection">
<div class="key">PULMONARY_EMBOLISM <span class="remove">✘</span></div>
</div>
I would ilke the above jQuery code to delete the entire div tag-collection. However, I will have many tag-collection divs on the page, and I want to make sure that when someone clicks the remove button that it only deletes the tag-collection div that the remove button was contained in.

If you have a lot of them, this will bind fewer listeners, so it's more "efficient"/lighter-weight:
$(function(){
$(document).on('click', 'span.remove', function() {
$(this).closest('.tag-collection').hide();
});
});

$(function(){
$(".remove").click(function(){
$(this).parents('.tag-collection').hide();
});
});
Emphasis on line #3.
Edit: As Kevin B states below, replacing parents() with closest() is probably better, since that will only select one ancestor.

$(".remove").click(function(){
$(this) // points to clicked element
.closest('.tag-collection') // jump to parent tag-collection
.hide(); // hide that
});

You can use the closest method, try this:
$(function(){
$(".remove").click(function(){
$(this).closest('.tag-collection').remove();
});
});

jquery .remove not working as expected

I have the following which is supposed to remove the element ".mycontainer" when I click on a close button. It's not removing the element though. When I use firebug. I can see that it is just moving it to outside of the html tags at the beginning on the code.
$('.closeButton').click( function() {
$(".mycontainer").slideUp( function() {
$(".closeButton").parent().appendTo(".ContentsHolder");
$(this).remove();
});
});
It works if I comment out the 3rd line //$(".closeButton").parent().appendTo(".ContentsHolder");
but this removes the content so I can't access it again.
EDIT:
My html looks something like this if it helps to understand what I'm doing...
<div class='ContentsHolder'>
</div>
<div class='mycontainer'>
<div class='myContent'>
<a class='closebutton'>close</a>
... other content ...
</div>
</div>
I have also managed to make it work by putting a delay on the removal of mycontainer $(this).delay(500).remove();
I would not think this is a great solution though.

You could just chain the remove function after the slideUp like so :
$('.closeButton').click( function() {
$(".mycontainer").slideUp( function() {
$(".closeButton").parent().appendTo(".ContentsHolder");
}).remove();
});

I have solved same problem before like this:
$(".mycontainer").slideUp(500, function() {
$(this).remove();
});

It looks like $(this) is a different context to what you think.
Try adding console.log($(this)); to see the actual context in the console.
$('.closeButton').click( function() {
$(".mycontainer").slideUp( function() {
$(".closeButton").parent().appendTo(".ContentsHolder");
console.log($(this));
$(this).remove();
});
});