i'm trying to exclude a class from a jquery function, but I can't seem to get it to work properly. i tried .not() but it didn't seem to be working correctly.
here's the basic structure I have...
<div id='spotList' class='clickableSpot id_117 '>
<div id='leftCheckboxBar'>
<form id='checkboxForm' name='checkboxForm'>
<input type='checkbox' class='spotCheck' unchecked id='117'/>
</form>
</div><!--end leftcheckboxbar-->
<div id='leftCredits'>
<ul class='credits'>
<li id='agencyItem'>Agency: <span class='creditText searchAgency'>Y&R</span></li>
</ul>
</div><!--end leftcredits-->
</div><!--END SPOT LIST-->
Now I have a jQuery function where you can either click on the .spotList checkbox directly or on the .spotList div. It looks like this, and it works properly...
$('.spotCheck, .clickableSpot').click(function(){
/*do stuff*/
});
I don't want the span .creditText to be included in that selector. I can't seem to figure it out. There has to be a way for me to exclude clicking on that span and triggering the function. But I need everything else in the div to be clickable, just not that piece of text within the span.
Any ideas?
You can use target property of the event object:
$('.spotCheck, .clickableSpot').click(function(event){
if (!$(event.target).hasClass('creditText')) {
// do something here
}
});
You can also you stopPropagation method:
$('.creditText').click(function(event){
event.stopPropagation()
})
http://jsfiddle.net/4rBaM/
Related
I am dynamically creating a div using jquery named "sampageswrapper", the thing is that I want to check if the div name sampageswrapper is already created then delete it.
<div id="container2" class="container" style="width:600px; height: 700px" name="container2">
Enter Color Name and use + to add more colors:
<input id="byname" type="text" name="byname">
<br>
<br>
<div class="sampageswrapper">
<div class="pagenumbering" align="center" style="clear: both; margin-top:12px; color:#FFF">
<div class="buttons">
</div>
<div class="pagecount" align="center">
</div>
<div class="sampageswrapper">
</div>
And following is my JS/Jquery Code
if ($("#sampageswrapper").length > 0) {
jQuery('#container2').find('#sampageswrapper').remove();
//i also tried jQuery('#sampageswrapper').remove();
}
But I am unable to remove the div please guide me.
You are selecting sampageswrapper based on ID, but you should test on the class.
jQuery('#container2').find('.sampageswrapper').remove();
jQuery('#container2 .sampageswrapper').remove(); // works too
Seem like you have duplicated id, since id must be unique you can use class instead for your dynamically added elements, then you can do:
if ($("#container2 .sampageswrapper").length > 0) {
jQuery('#container2').find('.sampageswrapper').remove();
}
You try to remove an object with id sampageswrapper, but in the html that is the class names. Use .sampageswrapper instead in your remove statement!
Add a breakpoint:
if ($("#sampageswrapper").length > 0) {
debugger;
jQuery('#container2').find('#sampageswrapper').remove();
}
Open console and refresh page, once it stops on the breakpoint, in console run this:
jQuery('#container2')
Make sure it returns the object you expect. Then run this in console:
jQuery('#container2').find('#sampageswrapper')
Here you'll see it returns nothing. This is because the '#sampageswrapper' selector is wrong and should be a class selector instead:
jQuery('#container2').find('.sampageswrapper')
You should be going through this process whenever you have a problem with code that involves jquery selectors, so that you can focus in on the specific selector that is causing the problem.
if ($(".sampageswrapper").length > 0) {
jQuery('#container2').find('.sampageswrapper').remove();
}
use class selector instead of id selector
I know this is a simple thing to do but can't get my head around what I'm doing wrong. I have a h2 tag which will run a function on click, this will then locate a div with the class 'homeSlide' and then run the slideToggle method. However I can't seem to get the content to slide without making the two divs below with the same class name also slide.
Here is my HTML:
<h2>Header</h2>
<div id="home_newproducts_list">
<div class="category-products">
<ul class="products-grid">
<li>Hold fetured products so will be excluded from the slideToggle</li>
</ul>
<div class="homeSlide">
<!-- Content that needs to be displayed on slide -->
</div>
</div>
</div>
Jquery:
jQuery(document).ready(function(){
jQuery("#home_newproducts_list ul.products-grid").not(":first").wrapAll('<div class="homeSlide">');
jQuery(".home-spot h2").click(function(){
jQuery(this).next('.homeSlide').slideToggle(1000);
});
});
I hope i've explained it in enough detial.
So all I want to be able to do is run the slideToggle method on the homeSlide div, but only on the next one after the h2.
jQuery(".home-spot h2")
assuming you are selecting the <h2>Header</h2> element here
try with next() and find().
jQuery(this).next().find('.homeSlide').slideToggle(1000);
next() gets the immediately following sibling which is div#home_newproducts_list in your case
I'm working on a js script which will show / hide multiple divs based on css class, seemingly pretty simple. I set out to find an example of this and found something close in the article linked below. I used the code in the following link as a starting point.
Show/hide multiple divs using JavaScript
In my modified code (shown below) I am able to hide all (which is errant) and show all (which works correctly. I'm not sure why its not targeting the CSS class "red, green or blue" correctly. If I hard one of the class names in the script it works as expected, so I'm fairly certain I'm having an issue in the way I'm referencing the css targets themselves.
I am able to hide all and show all, yet I'm having difficulty showing only the selected class.
Here is the jsFiddle I'm working with: http://jsfiddle.net/juicycreative/WHpXz/4/
My code is below.
JavaScript
$('.categories li a').click(function () {
$('.marker').hide();
$((this).attr('target')).show();
});
$('#cat-show').click(function () {
$('.marker').show();
});
HTML
<ul class="categories">
<li id="cat-show" class="cat-col1" target="all" >All</li>
<li id="cat-models" class="cat-col1" target="red" >Model Homes</li>
<li id="cat-schools" class="cat-col1" target="blue">Schools</li>
<li id="cat-hospital" class="cat-col1" target="green" >Hospitals</li>
</ul>
<div id="locator">
<div id="overview-00" class="marker models" title="Maracay Homes<br />at Artesian Ranch"></div>
<!--SCHOOLS-->
<div id="overview-01" class="marker red" title="Perry High School">1</div>
<div id="overview-02" class="marker red" title="Payne Jr. High School">2</div>
<div id="overview-03" class="marker blue" title="Hamilton Prep">3</div>
<div id="overview-04" class="marker blue" title="Ryan Elementary">4</div>
<div id="overview-05" class="marker green" title="Chandler Traditional – Freedom">5</div>
</div>
Thanks in advance for any responses.
$((this).attr('target')).show();
This is syntactically incorrect. It should be $($(this).attr('target'))
However that's no good either because this is the anchor element that does not have the target. Use $(this).closest('li').attr('target') (or add the target to the <a>).
This is also semantically incorrect as that would interpolate to $("red") which would try to look for a <red> element.
$("." + $(this).closest('li').attr('target'))
http://jsfiddle.net/WHpXz/5/
You are almost there. This is the line that needs tweaking: $((this).attr('target')).show();
$(this) actually refers to the current anchor tag that was clicked. Since the anchor tag doesn't have the target attribute, you need to go up to the parent.
From there, you can get the target and add the '.' to the color to use as a selector.
var catToShow = $(this).parent().attr('target');
$('.' + catToShow).show();
I've edited your fiddle. Give it a shot.
http://jsfiddle.net/juicycreative/WHpXz/4/
I am facing a strange issue. My concrete html looks like follows:
<div class="pages">
<div class="dynamicPages"></div>
<div class="staticPages">
<div class="span4">
<ul class="nav nav-stacked">
<li>
<textarea class="newcomment field span12"
style="width: 350px; height: 20px; resize:none; font-size: 60%"
id="newcomment${page.id}"
name="newcomment${page.id}"
placeholder="Enter comment here...">
</textarea>
</li>
</ul>
</div>
</div>
</div>
Now sometimes i generate the same html like what is inside the div class span4 and add it to div class dynamic like follows:
$(".dynamicPages").append(page_html);
this dynamic html i generate after i make a ajax call to the server.
I have the following jquery function when the user enters the enter key in the text area.
$(".pages").on('keydown','.newcomment',function(event) {
if(event.which == '13'){
... do some stuff
}
});
Everything works perfect now.
Now i wanted to the following plugin for my text area:
https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js
So i changed the above jquery like shown below
$('.pages .newcomment').autogrow().keypress(function(event){
if(event.which == '13'){
...
}
});
and in my previous mentioned ajax call in the success event i do something again so autogrow attaches itself to the dynamically generated element as mentioned in this How do I automatically run a method on a dynamically generated textarea with jquery?
$('.pages .newcomment').autogrow();
But now i see in case when i add dynamic html the jquery function is not getting called at all. When i reload the page i.e when the html is populated from server side attributes the jquery function is called properly.
$('.pages .newcomment').autogrow().keypress(function(event){
This line is equivalent to this:
$('.pages .newcomment').autogrow();
$('.pages .newcomment').keypress(function(event){
This won't work on dynamically-added elements, because they don't exist at the time of the bind. You do event delegation with on earlier in your code. You need to do it again, and abandon your attempt at chaining:
$('.pages .newcomment').autogrow();
$(".pages").on('keydown','.newcomment',function(event) {
Use delegate() instead of on().
.delegate()
Attach a handler to one or more events for all elements that match the
selector, now or in the future, based on a specific set of root
elements.
<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.
You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>
You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});