This question already has answers here:
How do I prevent a parent's onclick event from firing when a child anchor is clicked?
(25 answers)
Closed 7 years ago.
If two onclick are on top of each other, i would like to know how to stop the second one from launching.
Example :
<div id="div1" onclick="alert('a');">
a
<div id="div2" onclick="alert('b');">
b
</div>
a
</div>
if click on div2, i would like to have only alert(b), but NOT alert(a) afterwards.
FIDDLE : https://jsfiddle.net/ae9av150/2/
<div id="div1" onclick="alert('a');">
a
<div id="div2" onclick="alert('b');event.stopPropagation();">
b
</div>
a
</div>
<div id="div1" onclick="alert('a');">
a
<div id="div2" onclick="event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);alert('b');">
b
</div>
a
</div>
Reference: http://javascript.info/tutorial/bubbling-and-capturing
for IE<9, you should use event.cancelBubble=true
Do like this.
window.onload = function() {
document.getElementById("div2").onclick = function(e){
e.stopPropagation();
alert('b');
}
}
HTML
<div id="div1" onclick="alert('a');">
a
<div id="div2">
b
</div>
a
</div>
Related
This question already has answers here:
Using JQuery to toggle div visibility
(4 answers)
Closed 1 year ago.
Hi I want to hide and show a text Cod Shipping charge
`<div class="row">
<div class="cell" id="well">Cod Shipping charge</div>
<div class="cell free"><?php echo $priceCurrency->getCurrency()->getCurrencySymbol();?> <span class="text-shipping-charge"><?php echo number_format($shippingrate,2,'.',''); ?></span></div>
</div>`
when clicking on the payment below code
<div class="payment-option">
<div class="head" >Part Payment (COD + Online)</div>
<div class="content">
<div class="cod-block">
<div class="cash-option">
<div class="pay-option">
<div class="option-info">20% Online (Now)</div>
<div class="option-cash">₹ 12,650</div>
</div>
<div class="pay-option">
<div class="option-info">80% Cash On Delivery</div>
<div class="option-cash">₹ 50,000</div>
</div>
</div>
Please Help
You mention JQuery so using that it could be something like:
$('.payment-option').click(function(){
$('.row').show();
});
Though class .row doesn't sound very unique so you may want to assign that element a unique id like
<div id="cod_shipping_charge" class="row">
then you can use:
$('#cod_shipping_charge').show();
$(document).ready(function() {
$("#btnNewGroup").click(function() {
$("#newGroup").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<button id="btnNewGroup">New Group</button>
<div id="newGroup" style="display:none">Div Content</div>
</div>
I've this loop in WordPress that displays post.
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1"></div>
<div class="child-2">
<div class="sub-child">
</div>
</div>
</div>
This 'parent-div' is in loop and it repeats 20-30 times for each post. For some of the posts, sub-child div would have no content, and in that case I want to hide 'child-1' div just for that particular post.
Solution in jQuery, JavaScript or PHP is fine.
Hope that makes sense.
Thanks.
You can try following
$(".parent-div").each((i,e) => {
if(!$(e).find(".child-2 .sub-child").text().trim()) $(e).find(".child-1").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1">Text 1</div>
<div class="child-2">
<div class="sub-child">
</div>
</div>
</div>
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1">Text 2</div>
<div class="child-2">
<div class="sub-child">
Some text
</div>
</div>
</div>
Try this with jQuery, where you can iterate over each parent div and check for text. if text length is zero then hide child div
$(function(){
$(".parent-div").each(function(){
var text = $(this).find(".child-2 > .sub-child").text();
if(text.length==0) {
$(this).find(".child-1").hide();
}
});
});
This question already has answers here:
Find nested element in query
(5 answers)
Closed 5 years ago.
I am after some assistance in passing the value of my span classes to a data attribute (data-groups) contained in their parent divs all with the same class (.item). Here is my current code.
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="value1"></span>Description</p>
</div>
</div>
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="another-value"></span>Description</p>
</div>
</div>
<div class="item" href="#" data-groups="">
<div class="caption">
<p><span class="third-value"></span>Description</p>
</div>
</div>
<script type="text/javascript">
$(".item").attr("data-groups", function() {
return $('.caption p span').attr('class');
});
</script>
This works somewhat but it populates all data-groups attributes with "value1". I am wanting them all to receive the data attribute from their respective child span classes. Eg, First item div should have a 'data-groups'attribute of 'value1', second with 'another-value', etc.
I'm a little rusty with jquery but learning as I go. Any assistance is appreciated.
Try this:
$(".item").attr("data-groups", function() {
return $(this).find('.caption p span').attr('class');
});
This question already has answers here:
getElementById() returns null even though the element exists [duplicate]
(5 answers)
Closed 6 years ago.
I'm having a problem when I try to get a element by using querySelectorAll.
Here is the part of HTML that I want to get from JS:
<div id="paginacao">
<div class="pag-base"> {{1}} </div>
<div class="pag-base">{{2}}</div>
<div class="pag-base">{{3}}</div>
<div class="pag-base">{{4}}</div>
<div class="pag-base">{{5}}</div>
<div class="pag-base">{{6}}</div>
<div class="pag-base">{{7}}</div>
<div class="pag-base">{{8}}</div>
<div class="pag-base">{{9}}</div>
<div class="pag-base">{{10}}</div>
<div class="pag-base">...</div>
</div>
I'm doing this on JavaScript:
var pages = document.querySelectorAll(".pag-base a");
console.log(pages[0].textContent);
but this always returns undefined. Anyone knows what am I doing wrong?
that's because the script file is loading before your dom is ready .
try script tag below your div tag
Nothing wrong with your code.
Everything working as expected, see below
var pages = document.querySelectorAll(".pag-base a"); console.log(pages[0].textContent);
for(var i =0; i < pages.length; i++){
console.log(pages[i].textContent);
}
<div id="paginacao">
<div class="pag-base"> {{1}} </div>
<div class="pag-base">{{2}}</div>
<div class="pag-base">{{3}}</div>
<div class="pag-base">{{4}}</div>
<div class="pag-base">{{5}}</div>
<div class="pag-base">{{6}}</div>
<div class="pag-base">{{7}}</div>
<div class="pag-base">{{8}}</div>
<div class="pag-base">{{9}}</div>
<div class="pag-base">{{10}}</div>
<div class="pag-base">...</div>
</div>
This question already has answers here:
Finding DOM node index
(7 answers)
Closed 8 years ago.
I want to know what position a div has in an argument: by this I mean, that if I have several divs witht the same name, like so:
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
I would like to detect onclick what position the div click takes: 1st, 2nd....
Use the index() function, it will return a zero-based index of the clicked element within the selection:
$('.woot').click(function(){
var clickedIndex = $('.woot').index($(this));
})
See it here: http://jsfiddle.net/xtbu13gh/
<div class="parent">
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var woots = $(".parent").find(".woot");
$(woots).each(function(index){
$(this).attr("data-position", index);
});
$(".parent").on("click", ".woot", function(){
console.log($(this).data("position"));
});
});
</script>
You should see the position in the console if you are running it in a browser like Chrome, for example.