I am having trouble hiding an element after appending it to a div. I have tried everything and looked all over for an answer. I spent almost the whole day on it.
So I use jquery.validate.js to make a custom error code
email: '<img id="img1" class="RCB" src="images/closeButton.png" /><h3>Incorrect Email</h3><p>Please enter a valid email address</p>'
which is then appended to my far right div #rightBar
errorClass: "rightNotification",
errorElement: "div",
errorPlacement: function(error, element) {
error.appendTo("#rightBar");
},
and then in a seperate js file I try to fade() it when the close button at the top is clicked
$(document).ready(function() {
$(".RCB").live("click", function() {
$('.rightNotification').hide();
});
});
I have also tried
$(document).ready(function() {
$(".RCB").click(function() {
$('.rightNotification').hide();
});
});
and a number of other solutions. I basically want the right close button (RCB) to close the entire notification. I can't really think of anything I haven't tried but I'm hoping you can think of something.
Cheers,
Matt
Any help would be greatly appreciated!
You'll need to use event delegation as it is added dynamically - live() was deprecated in version 1.7 and removed in version 1.9:
$(document).on("click", ".RCB", function() {
$('.rightNotification').hide();
});
Substitute document for a closer container element if possible (for added efficiency).
Related
so I've been tasked with making a website using Wordpress and on the homepage there's a slider that if you click on the buttons below, it's displays another image, simple right? Well, I've got the slider and I've got the buttons, I've added the jQuery and it doesn't want to work.
I first tried making the buttons actually buttons:
<button type="button" class="btn btn-success" id="hideshow-healthcare">Healthcare</button>
and that worked fine when I used this:
jQuery(document).ready(function() {
jQuery('#hideshow-healthcare').on('click', function() {
jQuery('#healthcare').show();
};
};
So after having it working like that, I moved on to making the buttons in to li's instead so that I could follow the design. Upon doing this, the slider no longer works. I've tried mulitple different things including adding the ID to everything in the li to see if that would work, and sadly not. I did some research and tried to change
jQuery('#hideshow-healthcare').on('click', function() {
to
jQuery('li#hideshow-healthcare').on('click', function() {
but still, no luck. I was hoping someone would be able to provide a solution to this problem.
Also, this is the li code I'm currently using:
<li><a id="hideshow-healthcare"><h5>HEALTHCARE</h5> Lighting to create a feeling of well being</a></li>
You need to add space after li element to find its descendants #hideshow-healthcare. It should be
jQuery('li #hideshow-healthcare').on('click', function() {
#hideshow-healthcare is child of li. Use descendant selector in jquery
jQuery('li a#hideshow-healthcare').on('click', function(event) {
event.preventDefault(); // prevents default action
// your code
});
Id be unique in html you just straightly write with id
jQuery('#hideshow-healthcare').on('click', function(event) {
event.preventDefault(); // prevents default action
// your code
});
This situation have been post a lot in there but I didn't find the best way to solve my problem. Please help me this.
enter code here
Link
I want to make the button to open/hide the table content. I used slideToggle() in JQuery and next() to cacth the table content.In jsfiddle you can see. My code is worked.
But it just on the Click to SHOW/HIDE (worked) the Click to SHOW/HIDE (not work) is the MAIN button which I want to make (BECAUSE THE DESIGN). But when I put the button in there, it didn't work anymore. How can I solve this. Please help !
check this demo, if you are expecting the same thing
DEMO
$( "#clickme" ).click(function() {
$( "#toggleMe" ).toggle( "slow", function() {
// Animation complete.
});
});
I have the following code that hides one text box and shows another. When the next one shows, I need the cursor to be on it, so I call .focus() on it. However, even though I have the call to .focus() as the second parameter, it still isn't focusing. Any ideas?
$(document).ready(function(){
$('.dummy-password-input').on('click', function() {
$(this).hide();
$(this).next().show(0, function() {
$(this).focus();
});
});
});
Sorry for the trouble everybody. It turns out that after messing with it some more, my DOM traversal wasn't quite right. I removed the divs I had around the input boxes and it works like a charm. Thank you.
That behavoiur occurs, becaus $(this) refers to the just hidden input field change your code like:
$(this).next().show(0, function() {
$(this).next().focus();
});
$(document).ready(function(){
$('.dummy-password-input').on('click', function() {
$(this).hide();
$(this).next().show().focus();
});
});
EDIT:
check this fiddle
In my previous question I asked about how can I toggle a textarea with a paragraph. I got the answer. Now I want to do the opposite of it. First I was showing the already hidden textarea + 2 buttons by a click of a hyperlink. Now on the click of one of the buttons I want to hide the text + 2 buttons and show the paragraph that was first already shown.
I have tried this JS so far but it's not working:
$(document).ready(function () {
$(".no_link").click(function (e) {
e.preventDefault();
});
$(".edit_offer").on('click', function () {
toggleEditPanel($(this));
});
$("#cancel_edits").on('click', function () {
$(this).closest("button").hide();
$(this).closest("textarea").hide();
$(this).closest("p.content").show();
});
});
function toggleEditPanel(link) {
link.parent().parent().parent().find("textarea").toggle();
link.parent().parent().parent().find("button").toggle();
link.parent().parent().parent().find("p.content").toggle();
}
But its not working. How can I solve this error?
If I am trying to call the function toggleEditPanel() again. Its not working then aswell.
You can find the markup in the fiddle. Here's the fiddle.
UPDATE 1:
Just came up with a solution. I can use the $.siblings() function to toggle the elements beside the button. Still, is there any better solution?
Here's the code that I came up with:
$("#cancel_edits").on('click', function () {
$(this).hide();
$(this).siblings("button").hide();
$(this).siblings("textarea").hide();
$(this).siblings("p.content").show();
});
UPDATE 2:
The problem in the above code is that if there are more than one panels like this then the code is not working. How can I solve that issue aswell?
You are using Id for selector $("#cancel_edits") .
Id selectors returns only first element , so if there are multiple pannel it will work only for first.
Instead give some class name and use it for selector. Further you can use chaining and caching in your code for better performance.
$(".cancel_edits").on('click', function () {
var elm=$(this);
elm.add(elm.siblings("button,textarea")).hide();
elm.siblings("p.content").show();
});
I would recommend referencing your elements by ID:
$("#cancel_edits").on('click', function () {
$('#save_edits').hide();
$('#edited_content').hide();
$(this).hide();
$("p.content").show();
});
JSFiddle
The great thing about using IDs is that you are guaranteed they are unique - no need to use closest() to find the element you want. If, however, you're using classes instead, closest() might be necessary or helpful.
I'm struggling to make an alert come up when an anchor tag with a specific class is clicked inside of a div.
My html section in question looks like this...
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
The jQuery section is as follows..
$('.bar').click(function()
{
alert("CLICKED");
});
My problem is that I cannot get this alert to come up, I think that I'm properly selecting the class "next", but it won't pick it up for some reason. I've also tried almost everything on this page but nothing is working. If I don't try to specify the anchor tag i.e. $('#foo').click(function()... then it works, but there will be multiple anchor tags within this div, so simply having the alert executed when the div is clicked won't work for what I need. The website this is on is a search engine using ajax to send information to do_search.php. Within the do_search.php I make pagination decisions based on how many results are found, and if applicable, a next, previous, last, and first link may be made and echoed.
EDIT: I just figured it out, it was my placement of the .next function, since it wasn't created on the initial document load but instead after a result had been returned, I moved the .next function to the success part of the ajax function since that is where the buttons will be created if they need to be, now it works.
Try using the live() command:
$(".bar").live("click", function(){ alert(); });
Because you load your button via AJAX, the click event isn't binded to it. If you use the live() command, it will automatically bind events to all elements created after the page has loaded.
More details, here
.live is now deprecated and is the selected answer for this. The answer is in the comments in the selected answer above. Here is the solution that resolved it for me:
$(document).on('click','.bar', function() { alert(); });
Thanks to #Blazemonger for the fix.
You surely missed $(document).ready(). Your code should be:
$(document).ready(function(){
$('.bar').click(function()
{
alert("CLICKED");
});
});
Hope this helps. Cheers
Make sure you have included JQuery Library properly.
Make sure your script has written between $(document).ready() in short $(function(){ });
Demo : http://jsfiddle.net/W9PXG/1/
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
$(function(){
$('a.bar').click(function()
{
alert("CLICKED");
});
});