Specific Button Click - javascript

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

Related

hide links upon click using jQuery

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();

.load() not working on ul li click

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");
});
});

remove/toggle class when users clicks on the link

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/

get next sibling element

can someone show me how to get only the next element
like when the first button is clicked, I only want the first message show
<div>
<span class="button">Button</span>
<span class="message" style="display:none;">first button clicked</span>
<span class="button">Button</span>
<span class="message" style="display:none;">second button clicked</span>
<span class="button">Button</span>
<span class="message" style="display:none;">third button clicked</span>
</div>
here is the jquery I have so far
<script>
$(this).next().fadeIn();
setTimeout(function(){$(this).next().fadeOut();}, 3000);
</script>
Try this:
$(".button").click(function(){
$(this).next().fadeIn().delay(3000).fadeOut();
});
DEMO
for your example, next() will suffice. it grabs a reference to whatever DOM element comes next
so you would setup a click handler like so
$("button").click(function(){
var message = $(this).next();
//do whatever you want
}
You should use a click event like this instead:
$( ".button" ).click(function() {
$(this).next().fadeIn();
setTimeout(function(){$(this).next().fadeOut();}, 3000);
});
Write your script like bellow
$('.button').click(function(){
var el = $(this);
el.next().fadeIn();
setTimeout(function(){
el.next().fadeOut();
}, 3000);
})
DEMO

closing element opened by toggle() function

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);

Categories

Resources