We Keep Coding

jQuery isn't recognizing a button

I'm trying to create a click event to a button but it ain't working.
This is what I've got so far:
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<div id="#background">
<div id="#showMoreComments">
<button id="#btn_showComments">Show more comments!</button>
</div>
</div>
I know it's kind of a silly question. But what am I doing wrong?

First remove the "#" from the id declaration in button tag i.e have this:
<button id="btn_showComments">Show more comments!</button>
Second, move the script below the html.

Remove the # from the button id. The # tells JQuery to select an element with the following id.
Like this:
<div id="#background">
<div id="#showMoreComments">
<button id="btn_showComments">Show more comments!</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>

<button id="#btn_showComments">Show more comments!</button>
should be -
<button id="btn_showComments">Show more comments!</button>
then your code will work just fine. :)
Kindly don't use # in HTML tags for IDs. # is attached to get an element using its ID.

Try this code, actually you have added # in your html code for ids. Please remove it.
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<div id="background">
<div id="showMoreComments">
<button id="btn_showComments">Show more comments!</button>
</div>
</div>

Remove the # from the element in the html.
<div id="background">
<div id="showMoreComments">

Hide the 3rd paragraph out of 5 paragraphs on a click of a button, with out assigning any class or id to the paragraphs

I have five paragraphs on my front end as below:
<form id="form1" runat="server">
<div id="div">
<p>para1</p>
<p>para2</p>
<p>para3</p>
<p>para4</p>
<p>para5</p>
<asp:Button id="button" runat="server" Text="Click to hide para3!" />
</div>
</form>
In JS I wrote the following:
$("#button").click(function () {
$('#div').find('p').hide();
return false;
});
I know when I click on the button it hides all the p tags, so it would be great if any one can tell me how I would be able to hide the third paragraph only.

You can achieve this by using the eq() method to specify which element in a matched set you want to retrieve by its index. As the index is zero-based, to get the third element would be eq(2).
Also note that you should hook to the submit event of the form element, not the click event of the button. Firstly because it's much better practice and secondly because you're using ASP.Net web forms which means that the id attributes will be over-written on any runat="server" elements when the HTML is generated by the server (unless you specify a setting but that's not specifically relevant here).
Try this:
<form id="form1" runat="server">
<div id="div">
<p>para1</p>
<p>para2</p>
<p>para3</p>
<p>para4</p>
<p>para5</p>
<asp:Button id="button" runat="server" Text="Click to hide para3!" />
</div>
</form>
$("form").submit(function(e) {
e.preventDefault();
$('#div').find('p:eq(2)').hide();
});
Working example

jQuery's nth-child(n) selector selects all elements that are the nth child, regardless of type, of their parent.
So you can do it with this way:
$("#button").click(function () {
$('#div p:nth-child(3)').hide();
return false;
});

You can simply use jquery's .eq().
this method reduce the set of matched elements to the one at the specified index.
For more Jquery's.eq()
$("form").submit(function(e) {
e.preventDefault();
$('#div p').eq(2).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="form1">
<div id="div">
<p>para1</p>
<p>para2</p>
<p>para3</p>
<p>para4</p>
<p>para5</p>
<button id="button">Click to hide para3</button>
</div>
</form>

Try this:
$("#button").click(function () {
$('#div').find('p:nth-child(3)').hide()
return false;
});
:nth-child(' + number + ') will give the child at 'Number' position.

Let's play. (wont not work on Safari or IE due to arrows though)
button.onclick = e => div.children[2].hidden = !div.children[2].hidden;
<form id="form1">
<div id="div">
<p>para1</p>
<p>para2</p>
<p>para3</p>
<p>para4</p>
<p>para5</p>
<button id="button">Click to hide para3</button>
</div>
</form>

On Checkbox click show hide div having same class dynamically

I want click on the check box and hide the respective content.
Now in my code all the content with same class gets hidden when I click any one of the checkbox.
Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.
Fiddle link for reference
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$('.div1').hide();
} else {
$('.div1').show();
}
});
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
<input type="checkbox">Exam1
<div class="div1">I am content1!
</div>
<br>
<input type="checkbox">Exam2
<div class="div1">I am content2!
</div>
<br>
<input type="checkbox">Exam3
<div class="div1">I am content3!
</div>
<br>
<input type="checkbox">Exam4
<div class="div1">I am content4!
</div>
<br>
</form>
https://jsfiddle.net/6ybp2tL6/
Is this possible??
Thanks in advance

Try this instead DEMO
$('input[type="checkbox"]').click(function() {
($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});

Try to hide all the divs with class div1 initially,
$(".div1").hide();
$('input[type="checkbox"]').click(function() {
$(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
});
And toggle the visibility of the relevant div element with class div1 by using next() and toggle()
DEMO

if jQuery element hasClass() change different element link text

I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>

To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.

Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE

Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');

On button click, select a sibling element with JQuery

I have this code:
<div class="item">
<div class="hidden">44</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
<script type="text/javascript">
$(document).ready(function () {
$('#btnAddCommentForAnswer').click(function () {
alert(XXX);
});
});
</script>
</div>
<div class="item">
<div class="hidden">12</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
<script type="text/javascript">
$(document).ready(function () {
$('#btnAddCommentForAnswer').click(function () {
alert(XXX)
});
});
</script>
</div>
what code should I put at XXX to get the content of the div with class=hidden when i press the button at the same div with class=item?
If you click the first button you should get 44, and for clicking the second button you get 12.

id's are meant to be unique; you may wish to consider changing the id to a class.
With that in place, you could use a script like the following to achieve what you want:
$(document).ready(function() {
$('.btnAddCommentForAnswer').click(function() {
alert($(this).siblings('.hidden').text());
});
});
Here's a JSFiddle example: JSFiddle
Also, you don't need to have two script tags in your script! This one script wrapped in <script> tags is all that is necessary :)

Haven't tried but this should work:
$(this).closest('div').text()

You need not repeat the javascript code multiple times. Also, you cannot use id in jquery as the buttons have same id.
Here is the jsfiddle http://jsfiddle.net/t8XJZ/ which might solve your problem.

maybe this is more useful for you...
jquery:
$(document).ready(function () {
$('.item').each(function(){
$(this).find("#btnAddCommentForAnswer").click(function () {
alert($(this).prev(".hidden").text())
});
});
});
html:
<div class="item">
<div class="hidden">44</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
</div>
<div class="item">
<div class="hidden">12</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
</div>