We Keep Coding

Link is not getting clicked if parent div has click event

I have a div which has a trigger click associated with it. Inside that div there is another div in which I have binded html using innerhtml.bind(Aurelia). That HTML part contains anchor tag. Now when I am clicking on the link nothing is happening. It is not opening the link.
My HTML structure looks somewhat like this:
<div click.trigger="someMethod()">
<div>
<div innerhtml.bind="">
</div>
</div>
</div>
Please help in what I am doing wrong?

How do I insert a ahref around my mouseover divs - wordpress keeps removing the ahref

on the following site: http://www.strategix.co.za/ on that page you will see the heading OUR SOLUTIONS with the 8 hover over boxes.
what I'm trying to do is to wrap a href around each box so that not only when you hover over does it display the right side div but you can click on the box which takes you to the relevant page.
so in the code:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
I try say:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
But the minute I save it in wordpress it removes the ahref. I also tried this:
<div class="left2">
<div class="box2"><div>Microsoft Dynamics ERP</div></div>
</div>
But that didnt save either. I just need each seperate whole box to have an href.
Will appreciate some help.
Thanks.

Try
<div class="left2">
<div class="box2" onclick="javascript:window.location.href='link';">Microsoft Dynamics ERP</div>
</div>
Using javascript is one way to apply a link to an entire div.

load div from remote html page and append it in current page [duplicate]

This question already has answers here:
Jquery load function that will append onto HTML already present
(3 answers)
Closed 8 years ago.
i need to load a div from a remote html page to the current page based on user selected image.
the process is when the user clicks any image in the sidebar in the current page, say, load_page.html it will load the required div from snippets.html and append it to the container div
following is my html code for container div in load_page.html :-
<div id="container">
<div class="section">
<h2>example heading</h2>
<p>this is an example paragraph.</p>
</div>
</div>
following is the code of the single image (which will be clicked by the users to load the required div):
<div class="load_snippet" data-snippet="1">
<img src="image.png" alt="image"/>
</div>
when the user clicks on the above image/div the data-snippet value is sent as request to load the div with same id in the snippets page
following is the code in the snippets page:
<div class="section" id="1">
<p> this is a snippet. i will be loaded when the user requests me </p>
</div>
following is the jquery code which should load the div:
$(function(){
$('.load_snippet').on('click', function(){
var snippet = $(this).data('snippet');
$('#container').load('assets/snippets.html #'+snippet);
});
});
it is not working perfectly it clears all the contents in the container div.i just want it to be appended in the container div.
and in my snippets page there is only html divs.
please help

Well - if you want append new content just create a div where you can place your content then:
$(function(){
$('.load_snippet').on('click', function(){
var snippet = $(this).data('snippet');
$('#container').append($('<div>').load('assets/snippets.html #'+snippet));
});
});

How to reload a div with ID xyz once the dynamic content is generated

I am creating content dynamically inside a Main div , the content is stored in another div with classes... but the content is not visible since the page and all the java scripts are already loaded ... I think I need to refresh the main div with all the classes in order for the content to be visible.....If one can please help me with the code would be great......
Sample code:
<div id="grid">
--- Dynamically generated
<div class="Test" >
</div>
</div>

Load content into div only on click with additional

Ok Im trying to do a few different things but they are all pretty simple. I can only find answers that somewhat give a piece of what Im trying to do and when I mix and match different answers they don't work well together. I figured it would be better to ask specifically.
The hidden divs on the bottom are filled with images so I only want them to load when a link is clicked and not when the page is loaded. Each hidden div will have three divs of its own that target the three top divs so when you click the link for that hidden div all three of the divs in that hidden div load into the three top divs. I'm pretty sure I know how to make one link trigger different events so you don't have to help me there unless you know a simpler way to do this. Here are the main things I need help with:
loading div content only on click and not page load
targeting a div to load other div content into
when link is clicked to open a new hidden div, the other hidden div that was showing goes away
and because this is a tech website it would be nice to have some kind of tech-y transition when switching between/loading new divs. If nothing else a fade would work but you don't have to help me with this part, just if you happen to know a code or webpage with different transition effects for loading content that would be nice.
I don't really have any pre written code yet that will conflict with whatever you suggest so you can suggest anything. You don't have to write everything out, I can catch on with an example. Maybe.
Thank you I know there are separate individual answers but again I have had trouble trying to get them to work together or they will do part of what I need but not the other. I thought if I just asked instead someone could whip up a code for me in like 5 minutes. Thanks.
edit: Ill add code but I don't think it'll help much.
<div id="menu"> <a> -Cyber glasses Link- that opens cyberglasses div and loads it into presentation div </a></div>
<div id="presentation">
<div id="div-pic-1">Empty space to load stuff into</div>
<div id="center-content">Empty space to load stuff into</div>
<div id="div-pic-2">Empty space to load stuff into</div>
</div>
<div id="cyberglasses">(this div does not appear on pageload and only loads on click of the menu link named "Cyber glasses Link" at top of page)
<div id="cg1"> picture 1 of cyber glasses to load into id div-pic-1 </div>
<div id="cgcontent"> description of cyber glasses to load into id center-content</div>
<div id="cg2"> picture 2 of cyber glasses to load into id div-pic-2<div>
</div>
The menu link at the top named -Cyber glasses Link- loads div cg1 into div-pic-1
and div cgcontent into center-content
and div cg2 into div-pic-2
all at the same time. But the only div that loads on page load is the presentation div and menu div not the cyberglasses div. Cyberglasses div only loads on click of the cyber glasses link.

<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="navigation">
Welcome
Frog
Lamma
</div>
<div id="content"></div>
<div id="image"></div>
<script>
$(function(){
$('#navigation').on('click','a',function(e){
e.preventDefault();
$($(this).attr('rel')).load($(this).attr('href'));
});
});
</script>
</body>
</head>
</html>
Demo: https://oteck.co.uk/sample/load.html