I have two two <p> and one <div> and want event handler to display a message when the first <p> is pressed. How can I pull that off?
$("#menu:first-child").on('click', 'p', pullInput);
function pullInput() {
console.log("da");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<p id="newCategoryButton">New category</p>
<p>New Song</p>
</div>
Your selector is wrong. Update your selector like this
$("#menu p:first-child").on('click', pullInput);
function pullInput(){
console.log("HI!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<p id="newCategoryButton">New category</p>
<p>New Song</p>
</div>
Working fiddle https://jsfiddle.net/9amv3vmh/
You need to use :first-child selector with p element.
$("#menu").on('click','p:first-child',pullInput);
$("#menu").on('click', 'p:first-child', pullInput);
function pullInput() {
console.log("da");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<p id="newCategoryButton">New category</p>
<p>New Song</p>
</div>
However as you have sepecified ID with p element use it to bind event handler.
$("#newCategoryButton").on('click', pullInput);
Related
I'm learning Javascript and jQuery and I'm stuck at this one problem. Let's say my code looks like this:
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Now, if i click one of the div's, i want the other ones to disappear.
I know, I could create 4 functions for each one of them with on.click hey and display none with how , are and you. But is there a easier way? I bet there is, with classes maybe?
Thanks for responding!
Use siblings to get reference to its "brothers".
Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.
$('div').click(function(){
$(this).siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Or you can hide all the other div which not the clicked element using not
Remove elements from the set of matched elements.
$('div').click(function() {
$('div').not(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
You can just hide siblings() of clicked div.
$('div').click(function() {
$(this).siblings().fadeOut()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey">hey</div>
<div id="how">how</div>
<div id="are">are</div>
<div id="you">you</div>
Yeah there are some easier ways and I could tell a one from it,
Set a common class to all the elements that you are gonna target,
<div class="clickable" id="hey"> hey </div>
<div class="clickable" id="how"> how </div>
<div class="clickable" id="are"> are </div>
<div class="clickable" id="you"> you </div>
And you have to bind a single click event by using a class selector,
$(".clickable").on("click", function(){ });
Now use the .siblings() functions to hide the required elements,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").hide();
});
But using a toggle instead of hide would sounds logical,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").toggle();
});
Since you can do the same operation over all the elements.
You can use not to avoid element and this will indicate current instance.
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).hide("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Assign a class to each of the elements:
<div id="hey" class='sth'> hey </div>
<div id="how" class='sth'> how </div>
<div id="are" class='sth'> are </div>
<div id="you"class='sth' > you </div>
And write a js function onclick.
Remove class 'sth' from 'this' element in this function
Hide all elements with class 'sth' $('.sth').hide();
For this example - you don't need to add any further selectors to target the div's although in reality - this solution wwould cause all divs on the page to be affectecd - adding classes would be my actual suggestion: - but this works for this example. Click a div and all divs are hidden then the clicked one is shown. I also added a reset button to allow all divs to reappear.
$('div').click(function(){
$('div').hide();
$(this).show();
});
$('#reset').click(function(){
$('div').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
<hr/>
<button type="button" id="reset">Reset</button>
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).toggle("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
When the mouse click, I need to hide the link and show another div.
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).parent().hide();">
Fetch from link
</a>
<div class="hello">Hello world</div>
</div>
I just use simple hide method. But how can I show my "hello" div after the link hide?
Since jQuery is used bind the event handler using it instead of ugly inline click handler.
You need to hide() the current element, then Class Selector ('.hello') can be used to display the other div.
jQuery(function($) {
$('.test').click(function(e) {
e.preventDefault();
$(this).hide();
$('.hello').show();
})
});
.hello {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
Fetch from link
<div class="hello">Hello world</div>
</div>
As per current HTML, you can use .next()
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
jQuery(function($) {
$('.test').click(function(e) {
e.preventDefault();
$(this).hide().next().show();
})
});
You can use the following code:
$(function() {
$('.test').click(function() {
$('.test').hide();
$('.hello').show();
});
})
.hello {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
Fetch from link
<div class="hello">Hello world</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).parent().hide();$('.hello').show();">
Fetch from link
</a>
</div>
<div class="hello" style="display: none; ">Hello world</div>
You must move the div outside because you are hiding the div containing your "Hello world" text.
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).hide().siblings('.hello,.second-class,.third-class').show();">
Fetch from link
</a>
<div class="hello">Hello world</div>
</div>
You are hiding the whole div containing both the elements. Hide link only.
After start the application, i load content of formularzZgloszeniowy to empty div(#zawartoscTabeli). After click in li element, i load dates from div #ogloszenia to div(#zawartoscTabeli). From this moment, i can't catch event from button #kik.
Has someone any idea how to solve this problem??
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<meta charset="utf-8">
<title>Dokument bez tytułu</title>
<script>
$(document).ready(function() {
$('#zawartoscTabeli').stop().css('opacity', '0').html($('#formularzZgloszeniowy').html()).animate({
opacity: 1
}, 500);
$("section ul").on('click', 'li', function() {
var id = this.id;
$('#zawartoscTabeli').stop().css('opacity', '0').html($('#ogloszenia div:nth-child(' + id + ')').html()).animate({
opacity: 1
}, 500);
});
$('#kik').click(function() {
alert('dddd');
});
});
</script>
</head>
<body>
<div id="wrapper">
<section>
<ul>
<li id="1" style="font-size: 12px;">CLICK</li>
</ul>
<div id="zawartoscTabeli">
</div>
</section>
<!--formularz zgloszeniowy-->
<div id="formularzZgloszeniowy" style="display: none">
<form id="form1" action="rejestracjaUzytkownika.jsp" method="POST">
<div class="formualrz">
<div class="width20">Preferowane miejsce pracy<sup>*</sup>:</div>
<div class="width20">
<input type="text" name="miejsce_pracy" />
</div>
</div>
<div class="formualrz">
<div class="left">Imię i nazwisko<sup>*</sup>:</div>
<div class="right">
<input type="text" name="imie_nazwisko" />
</div>
</div>
<BR/>
<BR/>
</form>
</div>
<!--formularz zgloszeniowy-->
<div id="ogloszenia" style="display: none">
<div>
<p class="bold">Opis stanowiska:</p>
<ul>
<li>123</li>
<li>1234</li>
<li>326236</li>
</ul>
<button id="kik">BACK</button>
</div>
</div>
</div>
</body>
</html>
Link to demo
As you're updating the html of element, the events are unbinded. Use event delegation:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$('#zawartoscTabeli').on('click', '#kik', function () {
alert('Łot de fack');
});
Demo: http://jsfiddle.net/tusharj/95v7fbbe/1/
Docs: http://learn.jquery.com/events/event-delegation/
I have a div setup like so:
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
I have the following code:
$('.show-comments').click(function(e){
e.preventDefault();
$('.comments-wrapper').slideToggle('slow');
});
As you would assume, the code works but on a class basis. I'd like for it to open up only the .comments-wrapper of its associated id (i.e. open slideToggle comments2 if content 2 button is clicked and so on and so on).
How would I do this?
$('.show-comments').click(function(e){
e.preventDefault();
$(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});
Note that this is dependent on the .content element being immediately followed by the .comments-wrapper.
If you have access to modify the html itself, I would suggest adding a wrapper element and then doing the following to avoid the reliance on the exact order of elements:
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
</div>
$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');
This way, if you add an element between the .content and the .comments-wrapper it does not break the code.
You can do this:
$(this).parent("div").next('.comments-wrapper').slideToggle('slow');
This will find the related div of class .comments-wrapper and slide toggle.
And a fiddle: http://jsfiddle.net/xCJQB/
$('.show-comments').click(function (e) {
e.preventDefault();
var num = this.id.match(/\d+$/)[0];
$("#comment" + num).slideToggle('slow');
});
Demo ---> http://jsfiddle.net/7pkyk/1/
Use this context
$(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');
If it is not the immediate element then you might try this as well
$(this).closest('.comments')
.nextAll('.comments-wrapper').first().slideToggle('slow');
you can add a common class to associate a button with a div.
html:
<div class="content">
<button class="show-comments group1" id="content1"></button>
</div>
<div class="comments-wrapper group1" id="comment1">1</div>
<div class="content">
<button class="show-comments group2" id="content2"></button>
</div>
<div class="comments-wrapper group2" id="comment2">2</div>
javascript:
$('.show-comments').click(function(e){
var associate = $(this).attr('class').match(/group\d+/).pop();
var selector = '.comments-wrapper.' + associate;
e.preventDefault();
$(selector).slideToggle('slow');
});
http://jsfiddle.net/uMNfJ/
<div class="wrap">
<div class="Level2">Click me</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level2">Click me</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level2">Click me</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level2">Click me</div>
<div class="Level3">Information</div>
</div>
jQuery
$('.Level2').click(function(){
$('.Level2').closest('.Level3').fadeToggle();
});
I wanted to select the closest level3 to fadeIn and fadeOut, but doesn't work. Is my syntax wrong? online Sample :http://jsfiddle.net/meEUZ/
Try .next() instead of .closest() that traverses through the ancestors of the DOM element.
Working Demo
Also you should use $(this) rather than $('.Level2') else it'll select ALL the .Level2 rather than the clicked one.
You can also go for something like this - $(this).closest('.wrap').find('.Level3').fadeToggle();.
jQuery's .closest() method doesn't select sibling selectors, but parents. Looks like you're looking for the .siblings() method.
$('.Level2').click(function(){
$(this).siblings('.Level3').fadeToggle();
});
closest travels up the dom tree. it won't find something thats a sibling. you can use a find on a parent to achieve this
$('.Level2').click(function(){
$(this).parent().find('.Level3').fadeToggle();
});
Yes, There are many method avaiable in Jquery to find closest of the DOM element
$('.Level1').click(function(){
$(this).next('.Level3').fadeToggle();
});
$('.Level2').click(function(){
$(this).closest('.wrap').find('.Level3').fadeToggle();
});
$('.Level4').click(function(){
$(this).parent().find('.Level3').fadeToggle();
});
$('.Level5').click(function(){
$(this).siblings('.Level3').fadeToggle();
});
.level{background:Red;width:200px;height:40px;}
.Level3{background:blue;width:300px;height:50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="Level1 level">Click me()sing next)</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level2 level">Click me(Using closest)</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level4 level">Click me(Usingh Parent)</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level5 level">Click me(Using Sibiling)</div>
<div class="Level3">Information</div>
</div>
Yes! closest starts the DOM search from the selector you pass to it, and goes upwards the DOM hierarchy, searching through the parents/ancestors. Use siblings or next instead.
Like this:
$('.Level2').click(function(){
$(this).siblings('.Level3').fadeToggle();
});
Get a clear idea from the following code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".add").on("click", function () {
var v = $(this).closest(".division").find("input[name='roll']").val();
alert(v);
});
});
</script>
<?php
for ($i = 1; $i <= 5; $i++) {
echo'<div class = "division">'
. '<form method="POST" action="">'
. '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
. '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
. '</form></div>';
}
?>