Lewis Day Lewis Day - 5 months ago 17
Javascript Question

Link positioning inside of div;

Okay below I have posted the script I'm using and the

#targetDiv
, Basically my problem is when I move the link that is currently contained within the
#targetDiv
outside of the div, The link no longer loads the page inside of the div, Is there a way I can move the link outside of the
#targetDiv
and still have it load the page contents inside of the div.

Script

$(function(){
$('#targetDiv').on('click', 'a', function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});


Div

<div id="targetDiv" class="collapse">
<a href="/page.php">Load</a>
</div>


The problem I have is that I want the
load
link to be outside of the target div however when I move it outside of the div it loads the main page not the content within the
targetDiv
.

What I'm trying to achieve;

<a href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>

Answer

Add a class to any links you want to use to load content

<a class="content-link" href="/page.php">Load</a>

And modify event listener accordingly so it handles both types of links

    $(document).on('click', '.content-link, #targetDiv a',function(e){
         e.preventDefault();// prevent browser from opening url
         $('#targetDiv').load(this.href);   
    });