html:
<div style="width: 260px;margin:25px 0 0 30px">
<input type="checkbox" name="send_email" class="delete_followup" />Send email alerts
<input type="checkbox" value="delete" type="checkbox" />Send SMS alerts <button type="submit" name="delete" value="{{follower.id}}" class="delete_follower">Delete</button>
</div>
js:
$(".delete_followup").click(function(){
var $this = $(this);
$(this).find(".delete_follower").show();
});
I want to show the hidden button on clicking the delete_followup class.i TRIED WITH ABOVE jQuery but not working.
Or try .nextAll:
$(this).nextAll(".delete_follower").show();
Working here: http://jsfiddle.net/tw5XK/
The delete_follower element is not a decedent of delete_followup element, it is a sibling element so instead of find() you need to use siblings()
$(".delete_followup").click(function(){
var $this = $(this);
$this.siblings(".delete_follower").show();
});
You are trying to search downward into the div, when you already have a reference to the element you want. Making it way more complicated than it needs to be lol
$(".delete_followup").click(function(){
$(this).show();
});
Whenever you trigger off a click event, the actual element clicked on is passed through as the scope of the function. Since you are triggering off the click of ".delete_followup", that div is your element scope
Try this:
$(".delete_followup").click(function () {
if (this.checked) {
$(this).siblings(".delete_follower").show();
} else {
$(this).siblings(".delete_follower").hide();
}
});
Demo here
Related
I am trying to click a button but the only thing that defines it is multiple classes. The element I want to click is
<div class="U26fgb XHsn7e obPDgb M9Bg4d">This is a button </div>
How would I go about clicking it using Javascript?
As long as it is the only <div> element with that class combination, you'd use .querySelector(), which accepts any valid CSS selector as an argument so you can select elements in JavaScript the same way you would in CSS:
// Scan the document for the <div> that has the required classes
let theDiv = document.querySelector("div.U26fgb.XHsn7e.obPDgb.M9Bg4d");
// Set up a click event handling function
theDiv.addEventListener("click", function(){
console.log("you clicked me");
});
// Trigger the click event of the <div>
theDiv.click();
<div class="U26fgb XHsn7e obPDgb M9Bg4d">Click Me</div>
FYI: You should get out of the habit of putting spaces on the insides of the < and > delimiters in HTML. Use this:
<div class="U26fgb XHsn7e obPDgb M9Bg4d">Click Me</div>
Not this:
< div class="U26fgb XHsn7e obPDgb M9Bg4d" >Click Me< /div >
very simple with jQuery:
$(".U26fgb.XHsn7e.obPDgb.M9Bg4d").click(function(){
console.log("clicked!");
});
const div = document.querySelector('div .M9Bg4d');
div.addEventListener("click", ()=> {
// here put what you wanna do after clicking the div.
});
onclick attribute works well inside almost all the html tags and here is the simple solution to click on the div and get a result. All the Best!
function clickDiv(){
console.log("Div is Clicked");
}
<div class="U26fgb XHsn7e obPDgb M9Bg4d" onclick="clickDiv()">This is a button </div>
I am building a "edit profile" page.
Here is what I want to do:
In each section, the employer will be shown and the edit form will be hidden.
When I click the "edit employer" button, the edit form will be shown and the employer will be hidden.
Here is what I did using jQuery. It does not work when I click on the "edit employer" button. I do not know why this does not work.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="edit">
<form class="editForm">
employer: <input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
$(this).children('.editButton').click(function() {
$(this).children('.editForm').show();
$(this).children('.contents').hide();
});
})
</script>
</body>
</html>
The $(this) inside the click function contains the local instance of the $(this).children('.editButton'). For that reason your code is not finding any .editForm elements.
For this to work you could do something like this:
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
var $this = $(this);
$(this).children('.editButton').click(function() {
$this.children('.editForm').show();
$this.children('.contents').hide();
});
})
</script>
If I may I would improve the code with some more changes:
<script>
$('.edit .editForm').hide(); // this will hide all instances of .editForm
$('.edit .editButton').click(function() { //assign 1 handler for all cases
$(this).siblings('.editForm').show(); // show the sibling edit form
$(this).siblings('.contents').hide(); // hide the sibling contents element
});
</script>
Reference:
Sibling Selector: https://api.jquery.com/siblings/#siblings-selector
The problem is the this inside the click handler referring to the button, not the div.edit. Here's one way to fix this:
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
});
$('div.edit').each(function() {
var $self = $(this);
$(this).children('.editButton').click(function() {
$self.children('.editForm').show();
$self.children('.contents').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit">
<form class="editForm">
employer:
<input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
You don't need to use .each() at all. Just do an .click() event on the class of .editButton and use this to find its parent. If you want to make a toggle, you're going to have to make use of a new class or something of that nature to make a conditional statement off of.
//This will hide *ANY* .editForm elements
$('.editForm').hide();
//This will fire off of *ANY* editButton clicks.
$('.editButton').click(function() {
var form = $(this).closest('.edit'); //Get the wrapper
if(form.hasClass('open')) { //Check to see if it is open or not
form.removeClass('open').addClass('close'); //Toggle Classes
form.find('.editForm').show();
form.find('.contents').hide();
} else {
form.removeClass('close').addClass('open');
form.find('.editForm').hide();
form.find('.contents').show();
}
});
I like to use closest and find more than parent and children (respectively). They can go 1-many layers up or down and search the hierarchy for whatever you're looking for, rather than parent and children going up or down a single layer.
If you are inserting your .edit form after the DOM loads, you're going to need to bind your click event to the document
$(document).on('click', '.editButton', function() {
var form = $(this).closest('.edit');
form.find('.editForm').hide();
form.find('.contents').show();
});
I have several elements on a page like bottom code.
<div>
click
some content
</div>
They can be clicked and jQuery picks that click. However one of the elements has a a link that is clicked should not be picked as a click of the parent element.
$('div:not(#notme)').on('click', function(e) {
// do something
});
Doesn't seem to work for some reason...
Use :has selector to selecting div element has specific child. In :has use :not.
$("div:has(a:not(#notme))").on("click", function(e) {
console.log("clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click
some content
</div>
<div>
<a href="#" >click2</a>
some content 2
</div>
You may try:
$('div').on('click', function(e) {
if($(e.target).attr("id") !== "notme") {
// do something
}
});
$('#notme').on('click', function(e) {
e.stopPropagation();
});
Hi I try to show a div element in jQuery mobile when the user touch the button. I already created own classes for the button and for the div element, but nothing happens. What classes should I take?
JS:
$(document).ready(function(){
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).siblings("div.comment").toggle();
});
});
CSS:
.comment {
display:none;
}
HTML:
<?php foreach ($result as $key => $row): ?>
<div class="ui-btn-text">
<button class="commentbtn" data-rel="button">comment</button>
<div id="createcomment" class="comment" data-theme="a">
<form data-ajax="false" name="login-form" class="login-form" action="./comments.php" method="post" style="padding:20px 40px;">
<div class="content">
<textarea rows="1" name="text" id="text" class="foo"></textarea>
</div>
</form>
</div>
</div>
<?php endforeach; ?>
You haven't got any element with the class .btn-info so you wouldn't be able to call the event from:
$(".btn-info").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).closest(".comment").children(".comment").show();
});
You have an element with the class .commentbtn which you would then do the same as you did with the .btn-info
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
// Console log the element
console.log($(this).closest(".comment").children(".comment"));
// Console log not showing the right element. So you need to get the
// sibling of the clicked button
// Instead of doing - $(this).closest(".comment").children(".comment").show();
// You can do the following
$(this).siblings("div.comment").show();
});
.closest() - looks at the element itself and its parents for a match.
.siblings - Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
Example With .show();
Here an example with .toggle(); If you wanted to show/hide the comment with same button. (Just little extra for you to look at)
Example With .toggle();
UPDATE:
Example with .comment shown on load
Your button has class commentbtn, so you should use that instead of btn-info. Also, you should be looking for the sibling div, not the closest.
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).siblings("div.comment").show();
});
JSFiddle demo
I'm trying to show hide immediate next imput within the div, but it opens all the inputs
I also tried
`$(this).next("input").show();` ( traversing )
nothing seems to work.
Any help?
Here is my http://jsfiddle.net/526stLtg/1/
You need to use siblings() and for toggling visibility use toggle()
$(document).ready(function() {
$(".add-guest > button").click(function() {
$(this).siblings('input').toggle();
});
});
.add-guest input[type="text"] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="add-guest">
<b>Bride:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>
<br/>
<br/>
<div class="add-guest">
<b>Groom:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>
You can use this to refer to html element and using .parent() and .find():
$(document).ready(function() {
$(".add-guest > button").click(function() {
$(this).text() === "Add" ? $(this).text("Remove") : $(this).text("Add");
$(this).parent().find("input").toggle();
});
});
.add-guest input[type="text"] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-guest">
<b>Bride:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>
<br/>
<br/>
<div class="add-guest">
<b>Groom:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>
Additionally you can use .toggle() instead of .show.
You can use $(this) to select the clicked button (the event trigger).
Then, if you look at your code, you'll see that the next element is a <br/>, and the next the <input> that you want to show. So, if you change:
$(".add-guest > input").show();
to
$(this).next().next().show();
It will work. You can think tha you can also use a selector to find the first sibling filtered by the selector, i.e.
$(this).next('input').show();
But this doesn't work. This checks if the sibling can be selected with the paseed selector. But you can use the .nextAll('input'), only because in this case there are only one sibling which can be seelcted like this. If not you could use this selector, and .first()
Your original code was selecting all inputs precede by elements with the .add-guest class, whic is not what you wanted to do.
If there are multiple input elemnts within div and you want to select first input element only then use :first pseudo-class
$(this).parent().find("input:first").toggle();