I want to bind a click event on parent element using child element's id.
I have this:
<span class='k-link'>
<div id='myDiv'> </div>
</span>
<span class='k-link'>
<div id='myDiv2'> </div>
</span>
I want to do this:
$("#myDiv:parent").click(function() { }); //Does not work as expected
$("#myDiv2:parent").click(function() { }); //Does not work as expected
However, this does not result in the desired behavior, and the click event only works when clicked on myDiv and not on span.
I have no control over span, I can only give id to the div, how can I bind a click event for the myDiv's parent (which is a span tag).
Is this possible?
Use parent() method like following.
$("#myDiv").parent().click(function() {
alert('OK');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='k-link'>
<div id='myDiv'>DIV</div>
</span>
Related
I am using event delegation on my project but for some reason it does not works as expected.
It may seem like a duplicated question but searching for days I have not found the solution so it is not as clear, even in a course I am taking at UDEMY this is not addressed.
The html structure is like this:
<div class="users-list">
<a class="useruid" id='. $row['unique_id'] .'>
<div class="content">
<img src="php/images/'. $row['img'] .'" alt="">
<div class="details">
<span>'. $row['fname']. " " . $row['lname'] .'</span>
<p>'. $you . $msg .'</p> </div>
</div>
<div class="status-dot '. $offline .'"><i class="fas fa-circle"></i>
</div>
</a>
</div>
The vars with the dollar sign are php variables and everything inside "users-list" <div> is added dynamically to the DOM (that part works well).
The problem comes when handling the event listener in javascript as follows:
const ulist = document.querySelector(".users-list");
ulist.addEventListener("click", (e) => {
e.preventDefault();
console.log(e.target);
if (e.target.classList.contains("useruid")) {
console.log(e.target.id);
}
});
I need to get the id number inside the element to use it in another part of the program but it will only be captured if I click on the outer boundaries of the box and most of the time only the <span> and the <p> elements are the ones that will capture the click.
What do I'm missing here, isn't the click suppose to bubble up all the way up passing through the <a> element not matter where I click in that box?
I've searched on other questions here and everywhere online for days but can't find a clear solution. Maybe my approach is incorrect, I don't know really.
Adding additional clarification
using this has the same problem:
if (e.target.matches("a.useruid")) {
console.log(e.target.id);
}
What do I'm missing here, isn't the click suppose to bubble up all the way to the <a> element not matter where I click in that box?
No. It bubbles up to <div class="users-list"> because that is where the event listener is bound.
The target is the element that triggered the event.
You need to change your logic from does the clicked element have the class to does the clicked element or one of its ancestors have the class.
You can do that with closest.
const ulist = document.querySelector(".users-list");
ulist.addEventListener("click", (e) => {
e.preventDefault();
const anchor = e.target.closest(".useruid");
console.log(e.target);
console.log(anchor)
if (anchor) {
console.log(anchor.id);
}
});
<div class="users-list">
<a class="useruid" id='one'>
<div class="content">
<img src="//placekitten.com/100/100" alt="">
<div class="details">
<span>foo</span>
<p>bar</p>
</div>
</div>
</a>
</div>
The target will be the most nested element that has been clicked, So, it maybe a child element to .useruid element.
I think you need to use closest
const ulist = document.querySelector(".users-list");
ulist.addEventListener("click", (e) => {
e.preventDefault();
console.log(e.target);
if (e.target.closest(".useruid")) {
console.log(e.target.id);
}
});
e.target represents the element event was called upon. If you click on span, your e.target is that span.
To solve the problem, you first have to check if the event was called on anchor tag.
const myTarget = e.target.matches("a")? e.target : e.target.closest("a")
How To Access keyword-text e.g java On click keyword-remove class.
First Of all it's outside keyword-remove scope can not use $(this).
I want to access nested selector span text.
<span class="keyword">
<span class="keyword-remove"></span>
<span class="keyword-text">java</span>
</span>
$(document).on("click",".keyword-remove", function(){
});
As the click event is on the span, it cannot be empty. If it is empty you cannot click it. After entering some data in the span select the sibling span using the siblings function and print the textContent. Alternatively .next can be used instead of siblings
$(document).on("click",".keyword-remove", function(){
console.log($(this).siblings('span')[0].textContent)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="keyword"><span class="keyword-remove">First span </span><span class="keyword-text">java</span></span>
use next() to select the next sibling of the element you clicked.
$(document).on("click",".keyword-remove", function(){
console.log($(this).next('.keyword-text').text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="keyword">
<span class="keyword-remove">REMOVE</span>
<span class="keyword-text">java</span>
</span>
You can use the following code block -
$(document).on("click",".keyword-remove", function(){
console.log($(this).next().find('.keyword-text').text())
});
Working Example -
https://jsfiddle.net/0wmnxdrp/1/
Personally I would use closest() paired with a following find(). The reason being, this removes the positional logic from the equation, and you only rely on the parent child relationship.
$(document).on("click",".keyword-remove", function(){
console.log($(this).closest('.keyword').find('.keyword-text').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="keyword">
<span class="keyword-remove">X</span>
<span class="keyword-text">java</span>
</span>
i have a div tag element and a couple of other elements inside it. I have on-click event set at div element, so that i can use its ID in my function. That works, but only if i click direct onto div element.
If i click direct on some of the other elements inside it, my function does not work because than i get id of the clicked tag. Is there any way that i can get divs id, no matter where i click on the div.
This is my code:
<a class="link" href="/userview/{{sendedId}}">
<div id="{{item.user_id}}" class="user" on-click="showUser">
<iron-image src$="{{item.social_accounts.0.profile_image}}"></iron-image>
<span class="username">{{item.full_name}}</span>
<br/>
<span class="followers">{{item.social_accounts.0.followers}} followers</span>
</div>
</a>
I used event.currentTarget and it works like i want it.
I have some fixed HTML and I need to set a class to the element newgroup based on the element with the class relatedheader. As you can see in the HTML, the first element has a string - Accessories. I want to give the three elements below that element with the class newgroup to have class based on that string. Then I want the next set to have class from the next relatedheader element.
How do I do this with jQuery or vanilla JS? I guess the first step is to make the relatedheader element a parent?
What I got so far:
$('.relatedheader').nextUntil('.relatedheader').addClass('selected');
How do I make the script take the class dynamically releatedheader element?
<div class="relatedheader">
<span class="unfoldedlabel" colspan="6">
<a>Accessories/</a>
</span>
</div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="relatedheader">
<span class="unfoldedlabel" colspan="6">
<a>computers/</a>
</span>
</div>
<div class="newgroup"></div>
<div class="newgroup"></div>
<div class="newgroup"></div>
Here you go:
$(document).ready(function(){
$(".unfoldedlabel a").each(function(){
if($(this).text() != "")
{
$(this).closest(".relatedheader").nextUntil(".relatedheader").addClass($(this).text().replace("/",""));
}
});
});
LINK To JSFIDDLE
Here is the working fiddle.
$('.relatedheader').find('a').each(function() {
$(this).parents('.relatedheader').nextUntil('div.relatedheader').addClass('selected');
});
Here in the above example I'm looping through each a inside .relatedheader class and then adding selected class to all element until next .relatedheader.
NOTE: If you want to only add those class to next set of element as per .relatedheader a selection or some event then you can bind this functionality to that event only.
Hope this is what you need!
So I have a popup. You click on an "+Add Text" link and it adds a text box to the page, along with another "+Add Text link" and an "x" in a span on the right corner of each textbox. When I click an "x" within this popup, I'd like for it to delete the two siblings that immediately follow it. The HTML generated on the page looks something like this...
<div class="popup">
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
</div>
When I click the divs with the class "delete-text-box-x">, I'd like for the following two siblings to be deleted. That is, the following corresponding textarea and "+Add Text" span.
I almost have it. Here is my jQuery
$('.delete-text-box-x').click(_.bind(function(e){
$('.delete-text-box-x').nextUntil('.add-textbox').remove();
}, this));
}
It's obvious why this doesn't work. The nextUntil method does indeed select and remove the textboxes following the 'X' divs. But the selector selects EVERY 'X' on the page, and therefore deletes EVERY textbox on the page. It also doesn't delete the '+Add Textbox' spans...
So how do I get more specific than the current selector I'm using? So it selects ONLY the specific 'X' I click, rather than every 'X' on the page.
Firstly, you need to base the selector on the element that raised the event using the this keyword. From there you can use nextUntil(), but you should use the selector of the next X so that all the required elements are found. Finally you need to use add() to include the clicked X itself. Try this:
$('.delete-text-box-x').click(function (e) {
$(this).nextUntil('.delete-text-box-x').add(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
</div>
I also note you're using some odd syntax around the anonymous function in the click handler which I presume this is due to another library. If not you should remove it.
This until works to find another element in the siblings, so in the above code you are selecting the next add-textbox and not the next X icon.
$('.delete-text-box-x').click(function() {
$(this).nextUntil('.delete-text-box-x')add(this).remove();
});