There are multiple links generated at run time with no specific ids tied to them, here is the code which generate links in the loop
<%for(int p=0;p<displayLink.length;p++){%>
<a href="javascript:removeAccount('<%=displayLink[p]%>')" ><%=displayLink[p]%></a>
<br>
<% }
Upon clicking on the link, it should be hidden or removed from the page, I am trying below but its not working.
function removeAccount (link){
$("#link").on('click', function(e) {
$('#link').prop('disabled',true);
});
}
function removeAccount (link){
$("#link").on('click', function(e) {
e.preventDefault();
$('#link').hide();
});
}
Try this code
<%for(int p=0;p<displayLink.length;p++){%>
<a href="javascript:void(0)" class="my-link" ><%=displayAcct[p]%></a><br>
<% } %>
Javascript
$(".my-link").on('click', function() {
$(this).hide();
});
this might give you some ideas:
edit: But it is unclear what do you expect to happen other than hiding it.
$("#links a").click(function(e) {
e.preventDefault();
$(this).fadeOut();
$('#out').html($(this).data('link'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="links">
link1
link2
link3
link4
link5
</div>
<span id="out"></span>
You cannot disable a link, it can be show/hide. In your, this is what you are looking for:
$('#link').hide();
If you want to completely remove the link from the page:
$('#link').remove();
Related
here is my code
$(document).ready(function(){
$("#work").click(function(){
$("#container").load("about/work.html");
});
$("#profile").click(function(){
$("#container").load("profile.html");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a id="work" href="">work</a></li>
<li><a id="profile" href="">profile</a></li>
</ul>
<div id="container"></div>
when i click on work or profile requested page just flashes in container div and sometime stays in but if i run same script on button click it loads page without any problem. How can i make it work with li ?
Add event.preventDefault
$(document).ready(function(){
$("#work").click(function(event){
event.preventDefault(); //changed here
$("#container").load("about/work.html");
});
$("#profile").click(function(event){
event.preventDefault(); //changed here
$("#container").load("profile.html");
});
});
There are 2 things to be changed here.
1) Try not leaving your href value empty. If you do then the browser will redirect to the same page. Give it a value # if possible href="#"
2) There is preventDefault() function missing from your <a> click event
$(document).ready(function(){
$("#work").click(function(e){
e.preventDefault();
$("#container").load("about/work.html");
});
$("#profile").click(function(e){
e.preventDefault();
$("#container").load("profile.html");
});
});
try to on click
$(document).ready( function() {
$("#work").on("click", function() {
$("#container").load("about/work.html");
});
});
I'm trying to make some elements active when I click on a link. I'm at this code right now which let's me add and remove active class when I click on element with class 'test'. What I need is to click a link and have the same behaviour to the div elements.
I have:
$('.test').on('click',function(){
$('.test.active').removeClass('active');
$(this).addClass('active');
});
.active{
color: #F00;
}
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href=''>Click me</a>
This code adds and removes the active class when I click the divs. How to do the same thing by clicking the link?
When you click a link, the behavior and the method will be the same as if you click a button, a div, or any other element of the page.
The difference is that an <a> element will redirect you to another page (inclusive if it's "the same" where you come from) and the changes won't be noticeable.
You will need to use $("element").addClass("class");
Add href="javascript:;" if to avoid redirection.
In jQuery below snippet will work:
$('.link').on('click', function(){
$(this).toggleClass('active');
})
Working Fiddle
Update
To highlight multiple divs
$('.link').on('click', function(){
if($('.test.active').next().hasClass('test'))
{
$('.test.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.test.active').removeClass('active');
$('.test:first').addClass('active');
}
})
Updated Fiddle
Your code should be:
$('.link').on('click', function () {
var $nextActive = $('.test.active').next('.test').length ? $('.test.active').next('.test') : $('.test').first();
$('.test.active').add($nextActive).toggleClass('active');
return false;
});
You can do like following. It will add and remove active class on link click.
$('.link').on('click', function(){
$('.active').removeClass('active').siblings('.test').addClass('active');
});
.active{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href='#'>Click me</a>
Edit:
This will work for infinite div.
JQuery:
$('.link').on('click', function(){
if($('.active').next().hasClass('test'))
{
$('.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.active').removeClass('active');
$('.test:first').addClass('active');
}
});
Fiddle
Just remove .active class.
below code is working.
$('.test').click(function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
replace js function
$('.test').on('click',function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
Demo Link https://jsfiddle.net/ffjcfb2b/
According to your post and comments you'd like to use link as class changer for divs. Here you go. Edited!
$('.link').on('click', function(){
$('.test.active').toggleClass('active').next().addClass("active");
});
Working fiddle
I have 3 or so button in my page which i need to show a social icon when user clicks on those links.
I used this jQuery
$('.one').on('click', function() {
$('.smenu').not($(this).next()).removeClass('share')
$(this).next().toggleClass('share');
});
<div id="sharing_area">
<ul class='smenu'>
<li class="facebook"><a target="_blank" onclick="return windowpop(this.href, 545, 433)" href="https://www.facebook.com/sharer/sharer.php?u=http://youtu.be/<? echo $id_3 ?>"><i class="icon-facebook"></i></a></li>
</ul>
<span class="one">Share</span>
</div>
I keep getting error, but i don't know what i'm doing wrong.
Can you guys help me out?
Here is my DEMO
There is no .next() element for the span you are clicking! Your UL is before the span, so you need prev():
http://jsfiddle.net/TrueBlueAussie/5dsrk470/5/
$('.one').on('click', function() {
console.log('click');
$('.smenu').not($(this).prev()).removeClass('share')
$(this).prev().toggleClass('share');
});
If you want to remove the class on clicking the links add this delegated event handler:
$(document).on('click', 'a', function(){
$('.smenu').removeClass('share')
});
Looks like you confused prev and next methods:
var $smenu = $('.smenu');
$('.one').on('click', function () {
$smenu.removeClass('share');
$(this).prev().toggleClass('share');
});
Demo: http://jsfiddle.net/5dsrk470/6/
How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.
You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin
Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});
Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});
Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);
I got a quick question:
I want every link in the div to alert a message, but only the anchors. I dont want the div to initiate the alert function.
Html:
<div id="abc">
<a href='#'> Button 1 </a>
<a href='#'> Button 2</a>
</div>
Javascript:
$(document).ready(function(){
$('#abc').click(function(){
alert('a');
});
});
How do I modify the above code?
Then you could just bind the event handler on the a tag inside the div.
$('#abc a').click(function() {
alert('a');
});
exchanging $('#shortlisting') with $('#shortlisting a') should work for you.
$('#abc a').on("click", function() {
alert('a');
});
Try:
$('#abc a').click(function() {
alert( $(this).text() );
});
Here is an example