I've got a function that, when you click in a textarea, it will slide down a button.
However, I have multiple textareas on the page with the same class and the problem is that if you click on any of the textareas, all of them will slide down the button.
How can I make it so that it only slides down on the textarea element that you click on, and not the others?
Here's a quick JSFiddle I made: http://jsfiddle.net/MgcDU/6100/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
JavaScript:
$("textarea").click(function(){
$(".btn-toggle").slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(".btn-toggle").slideUp();
}
});
Have to find the elements relative to the element that was clicked.
$(this) is the element that was clicked, and siblings() finds elements that are siblings.
http://jsfiddle.net/P9nMq/
$("textarea").click(function(){
$(this).siblings('.btn-toggle').slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(this).find('.btn-toggle').slideUp();
}
});
How about instead of relying on a class lookup, use the event target:
$("textarea").click(function(evtTarget){
$(evtTarget.target).parent().find($(".btn-toggle")).slideDown();
});
http://jsfiddle.net/paulprogrammer/MgcDU/6103/
The following snippet selects all the buttons:
$(".btn-toggle").slideUp();
You should replace it with this:
$(this).siblings(".btn-toggle").slideUp();
Update
I would rewrite your script with these lines :
$(".well").('focus blur', "textarea", function(e){
$(this)
.siblings(".btn-toggle")
.stop(true, true)
.slideToggle();
});
The advantage is that you delegate the events on the same parent of the two targeted elements and that you do not rely on any click event handlers.
Related
This is code where I want to enable stoppropagation on the class "Object" cause stop propagation I have used for modal class, to prevent close popup. And stoppropagation on the modal class has killed the javascript function in the 'object' class, so I have to prevent the stoppropagation function on the object class, so that the javascript inside the object class can work. Is there any solution? thank you so much. detil modal popup, codepin
$('.button').click(function() {
var buttonId = $(this).attr('id');
$('#modal-container').removeAttr('class').addClass(buttonId);
$('body').addClass('modal-active');
})
$('#modal-container').click(function() {
$(this).addClass('out');
$('body').removeClass('modal-active');
});
$('.modal').click(function(e) {
e.stopPropagation();
});
<div id="one" class="button">Button</div>
<div id="modal-container">
<div class="modal-background">
<div class="modal">
<div class="object">
<h2>Record your voice</h2>
<button>Press To Record</button>
<span>00:00</span>
<button>Send</button>
</div>
</div>
</div>
</div>
I'm trying to get the text of some div within the parent div where button is clicked. This is an example code
<div class="parentDiv" >
<div id="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div id="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Here parentDiv is repeated couple of times and text of divToFind is different in each parentDiv. Whenever remove button is clicked within the parentDiv I want to get the text of divToFind.
I have tried this
$(this).closest('.parentDiv').children('#divToFind').text();
But nothing is returned
Don't use same IDs in a single document. You should use classes instead. With class, it works fine.
It is mentioned in the spec that there must not be multiple elements in a document that have the same id value.
$(function(){
$("button").on("click", function(){
var t = $(this).closest('.parentDiv').children('.divToFind').text();
console.log(t);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Yes, Its true, you should not use same Id for 2 elements in an HTML document, However following is the code that can help you to get the text of the div given.
There are 2 ways:
$(this).parent().prev('#divToFind').text();
$(this).parent().prev().text();
prev and next allows us to traverse on the same level. You can provide selectors inside that to get particular element.
In your example its ID, you can update Id to some css class, so that you dont have to have elments with same ID.
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/
I have the following HTML code
<div id="id0_0" class="clearfix" style="margin-left:40px">
<div id="id0_1" class="choice">
<span id="spanradio_1" class="radio"> </span>
<span id="spanlabel_1" class="label"><label id="label_1">Indoor</label></span>
</div>
<div id="id0_2" class="choice">
<span id="spanradio_2" class="radio"> </span>
<span id="spanlabel_2" class="label"><label id="label_2">Outdoor</label></span>
</div>
</div>
with the following jQuery:
jQuery('.choice').click( function(e) {
alert('clicked!! ' + e.target.id);
var src_ele = $(e.target);
e.stopPropagation();
return false;
});
However, my click is triggering on the spanradio's & label's and not the div's. Any reason what is causing this?
Thanks!
Basically:
this is the element you bound the event to (i.e. one of the elements in the set that you called .on on)
e.target is the deepest element you clicked on
So you want this.id.
e.target is the element that the user actually clicked on.
If the user clicked on a nested element, e.target will be that element.
because the label is the ONLY content in a ".choice"-element and therefore is on the TOP --> it's actually the element, you clicked on...
check out event.relatedTarget if this is the right one for you.
I have alot of elements with class of .button all over my layout. Upon a click of the element with class of button, I need to check first that the element is within the parent div of either box1 or box2.
A short example would be... if the clicked button is within the box1 div && (another condition) then do something. Would it be best to use the combination of .closet and .length to check if the button is within a certain div?
<div id="box1">
<div id="column1">
<div class="round_button"></div>
<div style="background: #000">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
</div>
<div>
<div id="box2">
<div id="column2">
<div class="round_button"></div>
<div style="background: #000">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
</div>
<div>
In addition to the answer above, if there are a number of buttons, and instead of binding an event separately to each, you just want to attach once, based upon its ancestor, you can do something like this:
$(".button").click(function() {
if ($(this).is("#box1 *")) {}
});
If the functionality between the two groups of buttons differs significantly, I would just define event handlers on each group of buttons:
$('#box1 .button').on('click', function(event) {
// ...
});
$('#box2 .button').on('click', function(event) {
// ...
});
You don't need the if statement if there is no else.
$('#box1, #box2').find('.button').click(function() {
// do something
});
use $(this).parents("#box1"); inside the click event function for the buttons
$('#box1 .button').click(function() {
// first code
});
$('#box2 .button').click(function() {
// second code
});