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">

jQuery trigger excluding with .not()

So I want clicking on the img "tri" to hide the div "popu". But the img is a child of the div popu so i tried .not(). It didn't work. Note: Also I don't want div "textb" to trigger the hide.
HTML
<div id="re" class="column"><div id="s" class="popu"><img class="tri" src="img/whtri.png"/>
<div class="textb"><center style="font-size:14px;">Item Title</center>
<span style="font-size:12px;">Description this is an item that is very good and i like it very much! I like
<span class="highl">More...</span>
</span>
<span style="">
</span>
</div>
</div>
JQuery
$("body").click(function (e) {
if (!$(e.target).closest(".popu").length.not(".tri")) {
$("#s").hide(200)
}
});
Any Help Would Be Awesome!

You can use .parent():
$('img.tri').click(function() {
$(this).parent().hide();
});
or .closest():
$('img.tri').click(function() {
$(this).closest('.popu').hide();
});
Fiddle Demo

You can also use :
$('.tri').click(function(){
$('#s').hide();
});

Jquery Get Child DIV Within DIV

I have the following HTML code within the body:
<div id="hidden">
</div>
<div id="mainContianer">
<div id="firstChildDiv">
</div>
</div>
I am using the following code to get the child
$("div:first-child").attr('id')
But this returns "hidden" when I want it to return firstChildDiv, I have tried things like...
$("div[mainContainer ] div:first-child").attr('id')
$("div[id=mainContainer ] :first-child").attr('id')
$("#mainContainer :first-child").attr('id')
I know its a simple thing to do, but cant seem to see where I am going wrong...
Thanks

Your last selector
$("#mainContainer :first-child").attr('id')
works fine, if you correct the typo in the HTML (see this fiddle). It says mainContianer instead of mainContainer.
But, anyway, why don't you select simply by the id, if that element has an id?
$( '#firstChildDiv' )

$('#mainContainer > div:first-child').attr('id');

Try this,
$("#mainContianer:first-child").attr("id")
Check there is no space before ':'

Actually, you have a typo there in your html
<div id="mainContianer">
should be
<div id="mainContainer">
Then you can do
$("#mainContainer div:first-child").prop('id')
This uses prop rather than attr, which is slower and old jQuery Syntax

This is working for me....
$(document).ready(function(){
var a =$("#mainContainer div:first-child").attr('id');
alert(a);
});

this all return you first child of parent--in your case replace parent by mainContianer
$('#parent').children(":first")
$('#parent').children(":first-child")
$( $('#parent').children()[0] )
$('#parent').find(":first")
$('#parent').find(":nth-child(1)")
try - Child Selector (“parent > child”)
$("div > div").attr('id')
also try out
$("div div:first-child")

<html>
<head>
<script>
function getDiv(){
alert("answer = "+$('#mainContianer div:first-child').attr('id'));
}
</script>
</head>
<body>
<div id="hidden"></div>
<div id="mainContianer">
<div id="firstChildDiv">
</div>
</div>
<button onclick="getDiv()">click</button>
</body>
<html>

SCRIPT
<script language="JavaScript">
jQuery(document).ready(function($) {
$("#MY_BUTTON").click(function(event) {
$("div#PARENT_DIV").find("#CHILD_DIV").hide();
});
});
</script>
HTML CODE
<div id="PARENT_DIV">
<h1 class="Heading">MY HTML PAGE TEST</h1>
<br />
<div id="CHILD_DIV">THIS IS MY CHILD DIV</div>
</div>
<div class="MY_BUTTONS">
<a class="MySubmitButton" id="MY_BUTTON">
<span>Test it!</span>
</a>
</div>

for now in 2020 with jquery it can be like:
function myClickOnDiv(divPrm) {
let div=$(divPrm);
let targetElement=div.find('#my_id')
}
if say you div looks like this:
<div onclick=myClickOnDiv(this)><label id="my_id"></label></div>

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>

How to add a class in a div somewhere else in the DOM with jQuery?

How can add class .jokjok in the div next of input[bdate]?
Example: http://jsfiddle.net/cLNJE/1/
This code did not work for me:
<button>Click Me</button>
<div class="pa_row mediumCell">
<div class="column">
<input type="text" name="expass">
</div>
<div class="column">
<div class="auto_box2">
<input type="text" name="bdate">
<div></div>
</div>
</div>
<div class="column">
<input type="text" name="old">
</div>
</div>
$('button').live("click", function () {
$('input[bdate]').closest('.pa_row ').find('auto_box2 div').removeClass().addClass('jokjok');
//alert('click is ok')
});

I think you need to specify which attribute you want to use for selection of the right input:
$('input[name="bdate"]');
This worked for me:
$('button').live("click", function () {
$('input[name="bdate"]').closest('.pa_row').find('div.column div.auto_box2 div').first().removeClass().addClass('jokjok');
});
See: http://jsfiddle.net/cLNJE/7/

the easy ways is:
Add id attribut to div
<div id="someid"></div>
$('button').live("click", function () {
$('#someid').addClass('jokjok');
});
Or
Create new whole div
$('button').live("click", function () {
$('input[name="bdate"]').after('<div class="jokjok"></div>');
});

Some of your selectors are not quite right,
$('input[bdate]')
should be
$('input[name=bdate]')
this will select the input with a name attribute of 'bdate' your previous selector was selecting all inputs that had an attribute of 'bdate'
find('auto_box2 div')
should be
find('div.auto_box2')
this will select the 'div' with a class of 'auto_box2'
Making those changes leaves us with this code -
$('button').live("click", function() {
$('input[name=bdate]').closest('.pa_row ').find('div.auto_box2').removeClass().addClass('jokjok');
alert('click is ok')
});
which should hopefully do what you want.
Updated fiddle - http://jsfiddle.net/ipr101/542ZW/1/

http://jsfiddle.net/cLNJE/8/
$('button').live("click", function () {
$('.auto_box2 input').siblings('div').addClass('jokjok');
});