I have the following code with a link that should delete the region it belongs to :
<a href="javascript:function() { $(this).closest(".DatesSelection").remove(); };">
<div class="CloseButton">
Close
</div>
</a>
The button is generated but when I click it, I have the error:
Uncaught SyntaxError: Unexpected token (
Can anyone help please ?
Cheers,
The issue is due to the function definition within the href attribute and the use of quotes. To fix this, remove the function() around your logic, use onclick for an inline handler and use separate quotes to delimit the atttribute value and the selector string:
<a href="#" onclick="$(this).closest('.DatesSelection').remove();">
However, a much better approach entirely would be use unobtrusive event handlers instead of stuffing inline JS code in to href (where it should never be) or on* event attributes (which are now massively outdated), like this:
$(function() {
$('.DatesSelection a').click(function(e) {
e.preventDefault();
$(this).closest(".DatesSelection").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DatesSelection">
<a href="#">
<div class="CloseButton">
Close
</div>
</a>
</div>
<div class="DatesSelection">
<a href="#">
<div class="CloseButton">
Close
</div>
</a>
</div>
<div class="DatesSelection">
<a href="#">
<div class="CloseButton">
Close
</div>
</a>
</div>
Another option is to use event delegation, set click event listener on some parent container and check whether the source of the event is the corresponding anchor.
event.target.tagName === 'A' checks if the event was triggered by a element
event.target.parentNode.className === 'DatesSelection' checks whether the parent of the element which triggered the event has class DatesSelection
if both conditions are met then remove the parent element of the one that has triggered the event
document.body.addEventListener('click', event => {
if (event.target.tagName === 'A' && event.target.parentNode.className === 'DatesSelection') {
event.preventDefault();
event.target.parentNode.remove();
}
});
<div class="DatesSelection">
Close
</div>
<div class="DatesSelection">
Close
</div>
Related
I am trying to write a JavaScript or jquery function that binds a click event to dynamically or server generated element with the class name (manage-inventory). The function should perform the following :
When clicked, it should toggle a bootstrap class (d-none) on its next sibling element(manage-inventory-card). The key is here is to remove the default "d-none" class in order to make the "manage-inventory-card" element show
When the element with the class name (manage-inventory) is clicked again, it should add the class "d-none" back to the "manage-inventory-card" element in order to hide it.
If any part of the page except the "manage-inventory-card" is clicked, the "manage-inventory-card", the class name "d-none" should be added back to it.
Clicking another dynamically generated element with the same class (manage-inventory) should close the previous "manage-inventory-card" if still open by closing it with the addition of class "d-none".
The event should work on only one instance of "manage-inventory" and "manage-inventory-card" at a time. Clicking one should not make it work on all others at the same time. There can only be a running instance
Below is the HTML code when it is dynamically generated by the server
The code only works for toggling of the "d-none" class when it is clicked. I don't know how to write the one that hides it back by adding "d-none" to the currently opened "manage-investment-card" when another element "manage-inventory" element is clicked and also write the code that closes it when any part of the page is clicked. Thank you
$(document)
.find(".manage-inventory")
.each(function(index) {
$(this).on("click", function() {
$(this)
.next()
.toggleClass("d-none");
});
});
.d-none {display: none !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
So you need to delegate.
I am delegating from document because you want to check all clicks on document
$(document).on("click", function(e) {
var $tgt = $(e.target);
if ($tgt.is(".manage-inventory")) {
var $thisChild = $tgt.next();
$(".manage-inventory-card").not($thisChild).addClass("d-none");
$thisChild.toggleClass("d-none");
} else {
$(".manage-inventory-card").addClass("d-none");
}
});
.d-none {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">1
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">2
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
Please see this page which has this code:
<div class="pure-control-group query-brand-by-column">
<!-- somethings else -->
<div class="pure-u-1 pure-u-sm-1-24 control-group-sub">
X
</div>
</div>
Clicking the X link should remove its ancestor div.query-brand-by-column as a whole but somehow it's not working. I've checked jQuery docs and this answer and the code seems absolutely all right to me but it simply doesn't work. Any idea?
this in href doesn't refers to anchor element, thus it doesn't work. It refers to window.
You should bind element event handler using jQuery.
Script
$(document).on('click', '.pure-button danger' function(e) {
e.preventDefault();
$(this).closest('.query-brand-by-column').remove();
});
HTML
<div class="pure-control-group query-brand-by-column">
<!-- somethings else -->
<div class="pure-u-1 pure-u-sm-1-24 control-group-sub">
X
</div>
</div>
I will not recommended, However you can use inline onclick handler.
<a onclick="$(this).closest('.query-brand-by-column').remove();" href='#' class="pure-button danger">X</a>
Here is your answer, Enjoy
X
Detach your javascript from your html and remove your item with a click event, right now you aren't triggering any click events:
<script>
$(function(){
$('.pure-form').on('click','.query-brand-by-column a',function(){//this will create and delegate your click event to work on dynamically created items
$(this).closest('.query-brand-by-column').remove();
});
});
</script>
I have some collapsed/collapsible blocks whereby the first block is open and second/third closed. They work the way I want in terms of opening and closing, but I can't get my head around how to alter the function so that the plus and minus icons change for the correct block. At the moment all change at the same time no matter which block I open or close.
How I can alter the function so that the toggled block updates the correct icon?
function toggleDiv(divId) {
$("#"+divId).toggle();
$('.product-toggle span.icon').toggleClass('icon-plus icon-minus')
}
HTML
<p><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Features</span></p>
<div id="features">
Features
</div>
<p><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Specifications</span></p>
<div id="specifications">
Spec
</div>
<p><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">FAQ</span></p>
<div id="faq">
FAQ
</div>
Let me start off by saying no... just no!
Add the target in your markup as a data attribute:
<div class="product-toggle" data-target="features">
<p>
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="toggle-title">Features</span>
</p>
</div>
<div id="features">
Features
</div>
Attach a listener to the product-toggle class like so:
$(document).on('click', '.product-toggle', function() {
var target = this.dataset.target;
$('#'+target).toggle();
$(this).find('span.icon').toggleClass('icon-plus icon-minus');
});
JsFiddle
Note : Inline events are discouraged; you should use jQuery click handlers as you're already using jQuery.
For example (Demo):
$('a.product-toggle').click(function(e){
$(this).closest('p').next('div').toggle();
$(this).find('span.icon').toggleClass('icon-plus icon-minus')
})
If you need to use inline event calls,
You need to alter the second line to get the icon for current element
function toggleDiv(divId) {
$("#"+divId).toggle();
$("#"+divId).prev('p').find('.product-toggle span.icon').toggleClass('icon-plus icon-minus')
}
because,
$('.product-toggle span.icon')
selects all the <div>s
or pass this with the click event.
<p><a href="javascript:toggleDiv('features',this);"...
and
function toggleDiv(divId,currEl) {
$("#"+divId).toggle();
$(currEl).find('span.icon').toggleClass('icon-plus icon-minus')
}
Here is something I came up with which is a more handy solution and is not using javascript in href.
$('.product-toggle').on('click', function(evt){
// This will be set to the context of the current element
$("#"+this.name).toggle();
$(this).find('.icon').toggleClass('icon-plus icon-minus');
});
This requires that you give the a tags a name instead of calling the function directly. Here is a link to the fiddle: http://jsfiddle.net/ttpfzrgL/
Try this
function toggleDiv(divId) {
var idSelector = "#"+divId;
$(idSelector).toggle();
$('p').has('idSelector').closest('span.icon').toggleClass('icon-plus icon-minus');
}
I'm working in gsp view in Grails.
A link in a div triggers a Jquery event onclick.
The problem is when a new div is generated dynamically , only the link in the new form triggers this event. Whereas the old one is not functioning anymore.
Can anyone help me out with this?
Here is the div that is duplicated and cause the problem in view.gsp
<div id="supplementaryInfo">
<div id="deleteSupplementary" class="deleteSupplementary" >
<a href="#" id="deleteSupp">
<r:img class="icon float-right" uri="/img/app-icon-delete.gif" title="delete"/></a>
</div>
<g:render template="showConfirm" model="[id: id ]"/>
</div>
here is the jquery function for event !
function showConfirmationPanelForSuppDelete(){
$('#deleteSupp').on('click', function(event) {
event.preventDefault();
$("#showConfirmation).show();
});
cancelSuppDelete();
}
If you are cloning the div than I assume that there are duplicate ids, therefore you can use jquery's closest() function:
<div id="cloneMe" class="yourclass">
<input type="text" id="someId" value="" name="somename">
<i id="icodnId" class="icon-remove btn"></i>
</div>
tha you can use:
$(document).on('click','#icodnId',function(evt){
$(this).closest('.yourclass').dowhateveryouwant();
evt.preventDefault();
});
Here is a case:
<a href="#1" style="height:100px; width:100px;">
<div class="#2"></div>
<div class="#3"></div>
<div class="#4"></div>
<div>
<input onclick="#5" />
</div>
</a>
By default, if I click on #2,#3,#4,#5 I will be redirected to #1.
So how I have to fix CSS if I want to click on the input without #1 activation?
Thanks in advance!
Just put a
return(false);
at the end of the JavaScript that is executed when clicking the input.
Yep, you can do it like this:
<a href="#1" style="height:100px; width:100px;">
<div class="#2"></div>
<div class="#3"></div>
<div class="#4"></div>
<div>
<input onclick="doSomething(); return false;" />
</div>
</a>
Assuming your tag is written correctly, use z-index:
<input type="button" style="z-index:99" onclick="foo()" />
Though I wonder if you should rethink your page layout and avoid such a large link tag...
This is an interesting problem that I faced several times.
You basically need to listen for the click event on the parent element, then check if it's an anchor or other element and then act upon it.
$('YOUR ELEMENT').click(function (e) {
var target = $( e.target );
if ( target.is( "a" ) ) {
Do something
}
else if (target.is( "input" ))
{
Do something else
}
});
Although I wouldn't recommend having an anchor as a wrapper to div as it breaks in some cases, with this approach you can easily use a wrapper div with a data-link attribute and navigate to this link programmatically through JavaScript