The field Description is optional and only appears when the user clicks on the + Description button. However when another div is generated the code loses the focus of the element it should hide and the button doesn't work anymore.
<script>
$(document).ready(function(e){
$(document).on('click', '#hide-desc', function(e) {
$("#description").slideToggle();
});
});
</script>
I have a button to remove and add the following div:
<div class="item-wrapper">
<div class="item-inner-wrapper">
<!-- Among other stuff -->
<div id="description" class="item-child-desc">
{{ form }}
</div>
</div>
<div class="item-action-button">
<!-- Deletes item-wrapper and another button adds it -->
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
</div>
I know the function must be able to identify which description I am talking about, but I don't know how to do that. I tried to get the parent div of the button and specify the div with method find() but I could not make it work.
I have the same problem happening with an autocomplete function. I believe I will get both working if I can figure out what I have to do.
Based on your comments, I assume your html sort of looks like this (note that we use .description rather than #description since those are not unique elements):
<div class="item-wrapper">
<div class="item-action-button">
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
<div class="description" class="item-child-desc">
blergh
</div>
</div>
We just have to look for the parent .item-wrapper using e.target to reference the source of the event then search the child .description:
$(e.target).parents(".item-wrapper").find(".description").slideToggle();
Based on the sample html you've added, the following should also work without modification:
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle();
It's also possible to just use this:
$(this).parents(".item-wrapper").find(".item-child-desc").slideToggle();
In all cases, the crucial part is parents(".item-wrapper").
I'm not entirely certain of the question, but if my understanding is correct I believe I may have found a solution for you. Using jQuery Event Delegation, it's relatively simple!
Run this code snippet and see if I'm close to a solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<script>
$(document).ready(function (e) {
$(".item-action-button").on('click', '.hide-desc', function (e) {
$(e.delegateTarget).find(".item-child-desc").slideToggle();
});
});
</script>
<style>
.item-child-desc {
display: none;
}
</style>
The problem with using ids for event handling is that they are only ever registered with the last element with that matching id. If you want one event handler for all elements of a certain type, register an event handler with elements of a certain class or tag. You'd be doing yourself a disservice otherwise.
Hope this helps!
Related
I'm working on portfolio items, where every item looks like this
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site"></div>
</div>
Previous div is hidden and items are shown by this code
<a class="project" :href="`http://www.${item.site}`" >
So, if I put like "mysite.com" in item-site div and hover over item output is www.mysite.com and that is ok if item-site is not empty. But if that div is empty output is www. and I dont want that.Is there a way to prevent that?
How to dissable click if item-site class is empty, so if I click on it nothing happens, but if is not empty and has link then if I click it's opens that link in new window.
You can use the pointer-events: none CSS statement to disable the hover and click events on an element.
In your case, it might look something like this:
HTML:
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site not-clickable"></div>
</div>
CSS:
.not-clickable{
pointer-events: none;
}
If the DOM element (in this case <div class="item-site"></div>) is empty, then add the class not-clickable. If the element has content, then remove the class not-clickable.
Please also note that <div> tags are not clickable by default. It sounds like you want these to be links which are <a> tags. Also, an <a> tag without the href attribute has no pointer events - so an alternative would be to provide the href when you want the element to be clickable, and remove it when you want the element to not be clickable.
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<a class="item-site">I should not be clickable</a>
<a class="item-site" href="https://www.example.com" target="_blank">
I should be clickable, and I will also open in a new tab
</a>
</div>
Here is a pen that might explain further:
https://codepen.io/mikeabeln_nwea/pen/yZQLaj?editors=1111
On my page are repeating triggers, which should open (change the visibility) a specific form on click. On some pages, there are multiple triggers and forms.
The HTML markup is like this:
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form
</div>
</div>
I'm trying to work on a script, where on click on #form-trigger-x the resonating form (#form-x) get's displayed. That's not the problem, but I want to automate this, so if a page has one form it works and also if it has 10 forms it works, without the need to hardcode every number in the script.
I tried an approach with .each and $(this) but it opened all forms at once instead of the form that should be triggered.
First you need to add click event on all the a tag where id starts with form-trigger with
$("a[id^='form-trigger']").click(function(){
And then you just need to get the next of clicked a tag and play with its display property or whatever you want like
$(this).next()
$("a[id^='form-trigger']").click(function(){
$(this).next().slideToggle();
})
$(".btn").click(function(){
$(this).closest("div").slideToggle();
})
#form-2{
display:none;
}
#form-1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form 1
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 1</button>
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form 2
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 2</button>
</div>
</div>
Here is how I approached this. You don't need to target them with specific ID value, Instead, use classes because the basic structure of each container is same it would work no matter how many different forms you got.
When you click on the anchor tag, my script would look for closest form-container class and find the showform class in that dom element and show it.
I have added the code snippet below as an example.
Hope this helps!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="form-container-1" class="form-container">
<a onclick="showform(this);" id="form-trigger-1">Open Form</a>
<div id="form-1" class="showform hide">
content of form
</div>
</div>
<div id="form-container-2" class="form-container">
<a onclick="showform(this);" id="form-trigger-3">Open Form</a>
<div id="form-2" class="showform hide">
content of form
</div>
</div>
<script>
function showform(caller){
$(caller).closest(".form-container").find(".showform").removeClass('hide');
}
</script>
I've searched all over and I'm unable to get this to work. I've got a button which I want to use as the main control to load up a lightbox image.
Here is my HTML
<li class="span1">
<a href="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_b.jpg" title="FLAG4_km003" class=" thumbnail" target="_blank" data-lightbox="lightbox">
<img alt="FLAG4_km003" src="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_z.jpg">
</a>
<div class="hover-box">
<p>Title</p>
<button class="view box-button">Zoom</button>
<button class="request box-button">Request</button>
</div>
</li>
As you can see the required lightbox link is in place but I want to trigger the click of it when a user clicks on the 'Zoom' button.
Here is my jQuery which currently isn't working:
$(document).on('click', '.view', function(){
$(this).closest("li.span1 a").click();
});
closest doesn't work like that. It selects the first/closest matching parent of the element. You should at first select the closest li element and then select the child/descendant a element.
$(this).closest("li.span1").children('a').click();
You could also use the parent and siblings methods for selecting the target element:
$(this).parent("div.hover-box").siblings('a.thumbnail').click();
I have this HTML structure:
<div id="snaps">
<div class="snap_item">
<div class="snap_item_following_info">
<img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="#JohnDoe" />
<a class="snap_item_following_name" href="#">#JohnDoe</a>
</div>
<img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="#ErolSimsir" />
<div class="like_heart"></div>
<div class="snap_info">
<div class="snap_text">
Image caption
<a class="snap_text_hashtah" href="#">#LA_city_trip</a>
</div>
<div class="snap_sub_info">
<span class="snap_time">56 minutes ago</span>
<div class="like inactive_like">
<div class="like_icon"></div>
<div class="like_no_active">5477</div>
</div>
</div>
</div>
</div>
</div>
The div '#snaps' is a static div, which holds all the '.snap_item' elements which are added with the JQuery .html() function. So the '.snap_item' elements are dynamically added to the div '#snaps', like so:
<div id="snaps"><!-- static div that holds the dynamic elements -->
<div class="snap_item"><!-- dynamically added element -->
<img class="snap_img" src="..." alt="..." /><!-- when this element is double tapped, the event should be fired -->
</div>
</div>
When the user double taps on '.snap_img', some stuff has to happen. The element '.snap_img' is inside the '.snap_item' element.
What I have so far is:
$('#snaps').find('.snap_item').hammer().on({
doubletap : function(event){
alert("doubletap!");
}
});
This doesn't work at all. The on() function should allow me to fire events on dynamically added HTML, but this code doesn't work. I have this code from this SO question
I have included hammer.js, jquery_hammer_plugin.js and query.specialevent.hammer.js. So all the necessary JS files have been included, but still no luck.
How do I make this work?
Okay, so I've solved the issue by using this code:
$('#snaps').hammer({domEvents:true}).on("doubletap", ".snap_img", function() {
alert("doubletap!");
});
So, whoever is having an issue with firing Hammer touch events on dynamically added HTML, this is the solution!!!
Thanks to everyone who (tried) to help! :)
I have a php loop that print a lot of html in this form:
<div class="something">
...
<img class="prod-img" src="What-I-Need"/>
</div>
<div class="buttons" data-description="Some text here...">
<a class="activator">Click me!</a>
</div>
That piece of code is repeated many times. Usig jQuery I manage to get the description content using the parent selector just by:
$('.activator').click(function() {
alert($(this).parents('.buttons').data('description'));
})
Since $(this) have a parent with the field I need, that js code is working great, I wonder now, how can I retrieve the src content of the class prod-img? since is outside the parent div...
If they are grouped like this
<div class="container">
<div class="something">
...
<img class="prod-img" src="What-I-Need"/>
</div>
<div class="buttons" data-description="Some text here...">
<a class="activator">Click me!</a>
</div>
</div>
<div class="container">
.....etc....
You can get prod-img by using .closest() and .find()
var src = $(this).closest('.container').find('.prod-img').attr('src');
Otherwise you need to use .parent() .prev() and .find() which is very static making it harder to change the HTML markup without changing the code.
var src = $(this).parent().prev().find('.prod-img').attr('src');