I'm trying to bind a function with a non-existent class. I will try to explain
my js:
function hidelink()
{
$('#user_form').hide();
$('.selected').text("New User").removeClass('selected').addClass('unselected');
return false;
}
function showlink()
{
$('#user_form').show();
$('.unselected').text("Hide it").removeClass('unselected').addClass('selected');
return false;
}
$(function(){
$('#user_form').hide();
$('.unselected').click(showlink);
$('.selected').click(hidelink);
});
my html:
<div id="user_form">
My Link
</div>
So basically, when you click in the link it will change the classes (selected/unselected) and hide/show a div. The problem is that, when i click once, it shows the form, but if i click again in the link, the form don't hides again. Maybe because i'm biding the events when the page loads and at this time there is not element that match the selector ".selected".. makes sense?
Maybe because i'm biding the events when the page loads and at this time there is not element that match the selector ".selected"..
Yes. Use live().
Related
I have four a tags (two acting as a button and the other two as basic links).
M-Soft
HP
Google
Twitter
Here is my jquery code:
$(document).ready(function(){
$(".myBtn").click(function() {
$("#ConfirmBtn").attr("href", $(this).attr("href"));
$("#myModal").modal('show');
return false;
});
});
The first three a tags can invoke the modal and successfully redirect to their respective hrefs if a confirm button is clicked. The last a tag goes straight to its embedded href without invoking the modal first (note: because there is no class attribute within this a tag).
Question: I need to know if it's possible to add multiple a tags without having to write class for each of them, and still be able to invoke a modal and redirect after clicking a confirm button.
Your question is quite unclear. You can select every a elements by the "a" selector. Then in the click handler you can check whatever you want, for example existence of classes, etc.
$(document).ready(function(){
$("a").click(function() {
if ($(this).hasClass("myBtn")) {
$("#ConfirmBtn").attr("href", $(this).attr("href"));
$("#myModal").modal('show');
return false;
}
// do whatever else you want...
});
});
I have following code:
$('#myEl').blur(function(){
$(this).remove('.children');
});
But the children element have links inside, with another jQuery actions which doesn't trigger because the .children is removed on blur, which I guess is triggered before the click action. Simple example:
Children is visible and #myEl have focus
I click on the children link
#myEl loses his focus
Children element is removed
Children link action is not triggered, because I guess link is not present anymore
How to solve this? I was trying to delay remove:
$(this).delay(100).remove('.children');
With no luck.
If you are working with the delay way, you can't use jQuery .delay() since it only work on queued element (with animation).
You can use setTimeout :
$('#myEl').blur(function(){
var $this = $(this);
setTimeout(function(){
$this.remove('.children');
}, 100)
});
I've tried it with mousedown event and it worked fine. I don't thing adding a delay is always a good option.
<input type="text" id="myEl"></input>
<div class="children" >div child</div>
<script>
$('#myEl').blur(function(e){
$('.children').remove();
});
$(".children").mousedown(function() {
window.open('http://www.google.com')
});
</script>
And if you really want to add the click event for a specific reason then you can try this:-
$('#myEl').blur(function(e){
if(mousedown){
window.open('http://www.google.com');
mousedown = false;
}
$('.children').remove();
});
$('.children').click(function(e){
window.open('http://www.google.com')
});
$(".children").mousedown(function() {
mousedown = true
});
what about simply making the child elements hidden after a click? Or maybe even having the child itself remove all children from its parent container after it has processed the click?
$('#myEl').blur(function(){
$(this).children('.children').hide();
});
$('.children').on("click",function(){
// perform your click-code actions here
alert("I did it!");
// now remove your child elements from the parent
$(this).parent().children('.children').remove();
});
I asked a precursor to this question here:
Click link in DIV and show PHP/HTML in separate DIV
Then, after I removed the first script shown below, I was able to get the second script to work. I revised my question, but it appears to have gone silent. So I have a slightly modified question.
What is the conflict between the 2 scripts below and how can I modify them to work in tandem? Basically I want to be able to click anywhere in the DIV (".side_items") and have the child anchor links open in a separate DIV ("#main_content")
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
});
</script>
HTML: (slightly simplified)
<div id="main_content">
</div>
<div id="right_side">
<div class="side_items">
<a href="content.html">
<img src="images/examplethumb.png" /><br />
Content</a>
</div>
</div>
Both scripts work independently to achieve their individual desired result.
This will do it:
$(document).ready(function(){
$(".side_items").click(function(){
$("#main_content").load($(this).find("a").attr("href"));
return false;
})
});
Breaking it down:
$(".side_items").click(fn);
Find all the elements with a class of side_items and assign a click event handler (fn) to them. Each time one of these elements is clicked, fn is executed with the context of the element. In the discarded code you were using the selector .side_items a, which meant the click handler was only bound to the links inside the div, not the div itself.
$(this).find("a").attr("href")
Find all the links that are contained within the current element (this), and get the value of the href attribute from the first element found. In the discarded code the context (this) was a link. Since our handler is now bound to the containing div, the context is also the div. To get the link you have to find it.
$("#main_content").load(href);
Find the element with an id of main_content and load the content found at href into it. In the discarded code you were setting location.href, which causes the page to navigate away.
I think your issue is that you're trying to assign the $().ready(..) handler twice.
Try combing scripts like this
<script type="text/javascript">
var change_location = function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
}
var load_location = function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
}
$().ready(function(){
change_location();
load_function();
});
</script>
Hope that helps
This may sound a weird question,
I have a page which has a link:
<a href="#" class="emails" > Email to Friends </a>
Now I have an event attach to the anchor tag so that on click the given div toggle it state.
The Javascript Code look like this:
$(document).ready(function() {
$(".emails").bind("click",function() {
$("div#container").toggle
})
})
Now the above code and all of it works fine,
but here the big deal,
when I click the given link the my focus of the page move to top of the page,
and I have to scroll all the way down to see the change.
Can anyone help me on this?
It does this because the href="#" is an empty anchor. Anchors are used for linking to specific spots within a page. An empty anchor results in the page going back to the top.
To fix this in your javascript, you need to prevent the click event from propagating or "bubbling" up the DOM. You can do this by returning false from your click event.
$(document).ready(function() {
$(".emails").bind("click",function() {
$("div#container").toggle();
return false; // prevent propagation
})
});
You can also make the event available in the bind's click handler function by using an argument, usually named e. Having access to the event allows you to call methods on it such as .preventDefault().
$(document).ready(function() {
$(".emails").bind("click", function(event) {
$("div#container").toggle();
event.preventDefault(); // this can also go at the start of the method if you prefer
})
});
This will solve all cases where anchor is empty.
$(document).ready(function () {
$('a').click(function () {
$('[href = #]');
return false;
});
});
This comes from the href='#' in the a. Just remove this tag. But then it's technically not a link any more, so the cursor will default to a text-selector when over it. You can override this using cursor:pointer in your CSS. See the left menu on this website for reference.
Use:
<a href="javascript:void(0)" class="emails" > Email to Friends </a>
Or, using jQuery,
$(document).ready(function() {
$(".emails").attr("href","javascript:void(0)");
})
Void(0) returns a.. well.. it doesn't return anything. The browser knows how to go to nothing (i.e., what would happen if you did href=""), and to # (# is the top of the page), but not how to go to a void "value".
Whenever you put a javascript: in an attribute, the attribute's value gets set to the return value of the code inside. The code is called the first time the attribute is accessed.
But, void(0) returns nothing. Not even "". The browser takes this to meant that the link is not a link at all.
I have a div containing some content, in which there are some links. The div itself watches for the click event so it can make the content editable. However, I want the user to be able to click the links inside of the div and have it navigate to the linked page rather than edit the content (clicking anywhere else in the div should edit the content though). How do I achieve this?
Code example:
<div id="content">
Here's a link.
</div>
// jQuery Javascript:
$("#content").click(function() {
// Make content editable
});
(Clicking on the link shouldn't make the content editable, and instead should direct the page to google.com.)
Edit: I'm using my own code to make the content editable (switching out the div with a text area, that sort of thing).
Check the event target and return true
$("#content").click(function(e) {
if ($(e.target).is('a')) {
return true;
}
});
Not tested
The thinking behind this is to bail-out early from the handler and, by returning true, allow the browser to handle the event the usual way.
One error you have is that you are using content as a class in your HTML, but as an ID in your jQuery. So you should change your HTML to id="content" (assuming no other elements on your page already have that id.
Your Javascript can look like:
$("#content").click(function(){
this.setAttribute('contenteditable', 'true');
$(this).focus();
}).blur(function(){
this.setAttribute('contenteditable', 'false');
});
$("#content a").click(function(e){
e.stopPropagation();
});
Here's a JSFiddle: http://jsfiddle.net/q77Bs/
example
use event.stopPropagation()
// jQuery Javascript:
$(".content").click(function(e) {
// make content editable
});
$('.content a').click(function(e) {
e.stopPropagation();
});
You could change the z-index of the link to be greater than that of the div (not sure if that will work), or you can place each link inside another div with a higher zindex than the main div. This will prevent clicks from registering on the primary div, so make sure the secondary divs are correctly sized so as not to prevent the editing functionality
$('#content a ').live("click", function(event){
event.stopPropagation();
});
this will do the trick