In the following code:
// submit an item
$(document).on("click", ".match-item", function(event) {
// how to set $(this) == $('.match-item') clicked?
});
I'm looking to retrieve $(this) as the clicked item and not the document itself. How would I do this?
This is more of clarification rather than answer.
this is already referring to the currently clicked element.
$(document).on("click", ".match-item", function(event) {
console.log($(this).attr('class'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
Parent
<div class="match-item">----Click Me</div>
</div>
How about
$('.match-item').click(function() {
//your code with $(this) here
});
I am pretty sure $(this) will refer to the element with class match-item
Related
I'm looking for a way to add and remove class on the same button. So far this is my work in progress. The concept is when I click on the menu button it shows the menu. When I tap on the menu button again. The menu hides
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').addClass('show');
});
});
To achieve this you can use .toggleClass() like so:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
JsFiddle example
toggleClass
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
For more information about this function check here
Hope this helps!
You should use $(this) and toggleClass
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$(this).toggleClass('show');
});
});
which will add the class back to the specific element that was clicked.
http://api.jquery.com/toggleclass/
http://www.learningjquery.com/2007/08/what-is-this
Try this:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
DEMO
$('.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
Try this way
You can use .add() method with .toggleClass():
$(document).ready(function() {
$('button.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').add(this).toggleClass('show');
});
});
.portfolio-contact-form-wrap {
color:blue;
}
.show {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-portfolio">Button</button>
<div class="portfolio-contact-form-wrap">
<h1>contact form</h1>
</div>
Use toggleClass('show')
It will add the class on one click and remove the class on the second click.
<script>
$(document).ready(function () {
$('button.toggle-portfolio').on('click', function (e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
</script>
I have:
$(document).ready(function() {
$("#btn1").click(function() {
$("#po").append("<p><%= j f.datetime_select :dtmRealshow%><a>Remove</a></p>");
});
});
<p id="po"></p>
<button id="btn1">+</button>
When i click on the btn1 a new datetime_select field is added to the form.But i want to remove the parent <p> tag after clicking on the remove link.Please help me out.
Add a css class to anchor
$("#po").append("<p><%= j f.datetime_select :dtmRealshow%><a class='remove'>Remove</a></p>"); });
Then you can use Event Delegation using .on() delegated-events approach to bind click handler to anchor.
$("#po").on('click', ".remove", function(){
$(this).closest('p').remove();
});
Removing the parent <p> will remove it's children along with it.
If that's what you're looking for then try the following code.
$(document).ready(function(){
$("#btn1").click(function(){
$("#po").append("<p><a id='remove'>Remove</a></p>");
$("#remove").click(function() {
$(this).closest('p').remove();
});
});
});
Here is the demo
What is the best way to bind a functions to multiple div's?
$('#trigger1').change(function(){
// same code
});
$('#trigger3').change(function(){
// same code
});
Either use class (imo is class the best way)
<div class="trigger"></div>
<div class="trigger"></div>
$('.trigger').change(function(){
});
or do this
$('#trigger1,#trigger3').change(function(){
});
You can include multiple ids in the same function call:
$('#trigger1, #trigger3').change(function(){
// code goes here
});
Or you can give them the same class, e.g. triggerClass and then call it like such:
$('.triggerClass').change(function(){
// code goes here
});
add a common class name to those div
<div class="myClass" id="trigger1">
</div>
<div class="myClass" id="trigger2">
</div>
here is the script for it
$(".myClass").click(function(){
// your code
});
$('#trigger1, #trigger3').change(some_function);
Or:
$('#trigger1').add('#trigger3').change(some_function);
simply apply a same class to all elements then write
$('.classname').change(function(){
});
you could use
$('#trigger1, #trigger3').change(function(){
same code
});
to group the triggers
Add a common class:
<div class="rowTrigger">trigger 1</div>
<div class="rowTrigger">trigger 2</div>
Script
$(function(){
$("body").on("click", ".rowTrigger", function(e){
e.preventDefault();
var row = $(this); //row element
});
});
each "rowTrigger" will fire on the "click" handler, this can be changed to other or multiple events. See
http://api.jquery.com/on/ for more detail.
The scope of the events handled can be changed by changing "body" to "table" for example, so it will only fire when those 'div' rows from a table are clicked.
More simply it can be written as (firing for 'click' and 'hover' ... but you get the idea) :
$("div.rowTrigger").on("click hover", function(e){
e.preventDefault();
var row = $(this); //row element
//some extra code
});
I have the following html:
<ul class="treeList2">
<li class="topLevel marked checked"><div class="tlWrap clearfix"><input type="checkbox" checked="checked" class="checkbox"><strong>Level name here blah blah <span>(3)</span></strong></div></li>
...
<script type="text/javascript">
/*<![CDATA[*/
$(function(){
$('.treeList2 li.topLevel .tlWrap').click(function(){
alert(this);
});
});
/*]]>*/
</script>
The problem is that this fires when I click the checkbox (which i don't want). I Only want to alert(this) when the 'div' is clicked (I do this so that I can change the div background).
thanks
You can prevent the click event on the checkbox from bubbling up to the parent like this:
$('.checkbox').click(function(e){
e.stopPropagation();
});
You can try it here.
See http://api.jquery.com/event.stopPropagation/
check if the target is not input element and then only alert.
$(function(){
$('.treeList2 li.topLevel .tlWrap').click(function(e){
if (e.target.nodeName !== 'INPUT') {
alert(this);
}
});
});
Looking at it, you need to call the parent?
$('.treeList2 li.topLevel .tlWrap').parent().click( ...
Although if you want to change the parent div when the checkbox is clicked:
$('.treeList2 li.topLevel .tlWrap').click(function(){
$(this).parent().css('background-color','red');
});
[edit]
Sorry, I mis-read the html.
There's a 'not' function that you can exclude elements with:
$('.treeList2 li.topLevel .tlWrap').not('input').click( ...
This will fire when anything in the div is clicked on, except the checkbox.
You can check whether the element that triggered the event (e.target) has a class of tlWrap.
$(function(){
$('.treeList2 li.topLevel .tlWrap').click(function(e){
if($(e.target).hasClass("tlWrap")) {
alert(this);
}
});
});
See a working demo.
I am sorry that I have asked two questions in a few minutes.
In a html file, I got three child DIV tags in a parent DIV tag:
<div id="container">
<div id="frag-123">123</div>
<div id="frag-124">124</div>
<div id="frag-125">125</div>
</div>
Now when I click either the three child DIV tags, I will see two alert boxes pop up instead of one:
The first alert box will show something like this:
frag-123, and the second alert box will show something like this:
container
I dont know why.
I just want to get the ID value of a child DIV, not the one from the parent DIV.
<script>
$(function() {
$("div").click(function() {
var imgID = this.id;
alert(imgID);
});
});
</script>
Please help.
This is a case of event bubbling. You can stop event bubbling by giving
e.stopPropagation()
inside the click event handler.
Try
$(function() {
$("div").click(function(e) {
var imgID = this.id;
alert(imgID);
e.stopPropagation() // will prevent event bubbling
});
});
If you want to bind click event to only child elemets inside the container div then you can give like this
$("#container div").click(function(){
var imgID = this.id;
alert(imgID);
});
That's because you're binding the event handler to all DIVs. Instead, what you want is bind it only to DIVs within container:
<script type="text/javascript">
$(function() {
$("#container div").click(function() {
var imgID = this.id;
alert(imgID);
});
});
</script>