<div id="abclink">
+ click here to view
</div>
<div id="abctable" style="display: none;">
some text here, allot of text
</div>
So using jquery I try and do:
$("#abclink").bind("click", function() {
$("#abctable").show();
});
This doesn't work, and I don't know why?
you have to put a #
$("#abclink").bind("click", function() {
$("#abctable").show();
});
You might be missing the document.ready function. Also, it might be best to use toggle instead of show:
$(document).ready(function(){
$("#abclink").bind("click", function() {
$("#abctable").toggle();
});
})
I'm guessing #abclink doesn't exist at the point you're trying to bind the event. Are you doing it in the of the page? If so, try putting it in the document.ready event:
$(function() {
[your code]
});
Related
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.
When i added one select into label and binding for click event, jquery fires twice.
http://jsfiddle.net/d8Ax7/
html:
<label class="lol">
<div>
bla
</div>
<div style="display:none;">
<select></select>
</div>
</label>
javascript:
$("label.lol").on({
click : function ()
{
alert(1);
}
})
How can i fix this bug without adding "for" attribute to labels?
I know there are already many answers to this question but are vague.
$("label.lol").on({
click : function ()
{
alert(1);
return false;
}
});
Ok, Everyone appreciated. Problem Solved. But Question arises Why return false;.
Answer In Simple Words: It is a way of telling computer that return from the function, the task i gave to you is completed. No more Mess now.
You could try using the label's "for" attribute to link it to a select outside of it. See my example
<label for="test" class="lol">
<div>
bla
</div>
</label>
<div style="display:none;">
<select id="test"></select>
</div>
http://jsfiddle.net/d8Ax7/1/
$("label.lol").off("click").on(//...
but if it's firing twice it surely means you have bound it twice so using .off is more a hack than the best solution to your problem which would be to understand how you end up binding twice this event... & surely the code you show doesn't explain this double bondage
edit : & in your fiddle it does indeed trigger only once...
This way it works too but I'm don't fully understand what you're trying to do...
And a label should only contain a label text for the select and not contain the select himself..
$("label.lol div:first").on({
click : function ()
{
alert(1);
}
})
There are two options when overriding the click check out this stack overflow question for greater detail, but to sum it up try this...
$("label.lol").click(function () {
alert(1);
return false;
});
Your markup is horrible.. Your problem is that jquery is doing the click event on each div inside your label function - means twice. You should clean ur markup and ask the div you want to be clickable directly.
Else use :first to make sure the event is only fired once:
$('.lol div:first').click(function ()
{
alert("1");
})
You should add e.preventDefault();
$("label.lol").on({
click : function (e)
{
alert(1);
e.preventDefault();
}
});
your problem is with your distinction between elements.e.g you should select the first child of label with :first-child selector, or give it an id:
HTML:
<label class="lol">
<div id="first-child">
bla
</div>
<div style="display:none;">
<select></select>
</div>
</label>
JS:
$("#first-child").on('click',function (){
alert(1);
});
http://jsfiddle.net/d8Ax7/5/
Try to filter with CSS: Add an intermediate class clicked that prevents the second alert (or whatever action) and than remove the .clicked to be ready for the next round.
$("label.lol").on({
click : function ()
{
if (! $(this).hasClass('clicked'))
alert(1);
$(this).toggleClass('clicked');
}
})
I am using this:
$('#myLink').click(function () {
$('#MainDIV').empty();
});
Where:
<div id="MainDIV">
<fb:like href="somelinketc">....</fb:like>
</div>
I need everything inside <div id="MainDIV"> to disappear but I'm checking firefox and it's all still there.
Try it in this way.
$(document).ready(function(){
$('#myLink').click(function(){
document.getElementById('MainDIV').innerHTML="";
});
});
I think this is an easy way to overwrite the existing data in the element in which you want to make it disappear or change the contents according to your requirements.
There's an error in your .click() function. It should end with the parenthesis like this:
});
and not like this:
)};
Should fix it.
You should be preventing the click action of the link with preventDefault()
$('#myLink').click(function (e) {
e.preventDefault();
$('#MainDIV').empty();
});
Also I am not sure but your post above has a typo. )} should be }).
$("#MainDIV").html('');
That'll clear all the contents of the div.
$('#myLink').click(function () {
$('#MainDIV').hide(1);
)};
my question is a short one but I couldn't figure it out by myself. I've got a function like -> http://jsfiddle.net/gtU56/ . I'm calling a javascript-function with an event-listener(onclick) in my html-code. The function itself is more complex but I need the last snippet. By clicking 'Show More' the text should change. Why won't the text change?
Because the toggleText function isn't available when the html code is rendered.
In other words the function isn't set until the page is ready so the onclick function doesn't reference anything.
Either have the function like here http://jsfiddle.net/gtU56/2/
or have it in the head of the page because its needs to be ready immediately
If you want it to wait for the ready state you can do the following and remove the onclick action all together
http://jsfiddle.net/gtU56/7/
$(".text").click(function()
{
$(".text").toggle();
});
toggleText = function () {
$('.text').toggle();
}
check here http://jsfiddle.net/gtU56/3/
It's because of how you're loading the function. Switch it from onLoad to no wrap (head) and it works fine.
jsFiddle example
Using jsFiddle's onLoad wraps your function in a window.onload call like this:
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
function toggleText() {
$('.text').toggle();
}
});//]]>
</script>
While no wrap (head) just adds it normally like this:
<script type="text/javascript">
//<![CDATA[
function toggleText() {
$('.text').toggle();
}
//]]>
</script>
since you are already claiming having jquery, you need not use inline javascript. try this
var elems = $('.text');
elems.click(function(){
elems.toggle();
});
fiddle : http://jsfiddle.net/gtU56/5/
$('.text').click(function() {
$('.text').toggle('slow', function() {
// do your animation..
});
});
Js Fiddle
This is the solution - http://jsfiddle.net/gtU56/6/
You need to first make sure that the function is registered after page load. Then, bind a click event to the div.
Hope this helps!
First you should organize you jQuery code like this:
$.(document).ready(function() {
// enter jQuery code here
});
Otherwise you're accessing a not completly loaded html document.
Also, you don't need the event-listener if you are using jQuery.
This should work for you:
$.(document).ready(function() {
$('.text').click(function() {
$(this).toggle();
});
});
Is very easy. You can use ID or CLASS.
onclick="$('NAME ID or CLASS').toggle(ANIMATION or DURATION);"
<div>
<div class="text" onclick="$('.text2').toggle(400);">Show More</div>
<div class="text2" style="display:none">Show Less</div>
</div>
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();
});
});