Using AJAX to load div doesn't always work

changue this:

<script type="text/javascript">
$(".mystory-link").click(function(){
    // Your code;
    return false;
});
</script>

BY (This is the correct way to use jquery events):

<html>
<body>
<!-- anchors -->
<a class="mystory-link" href="https://www.google.com"></a>
<a class="mystory-link" href="https://www.yahoo.es"></a>
<a class="mystory-link" href="https://www.youtube.com"></a>

<!-- content -->
<div id="mystory-container"></div>

<!-- javascript -->
<script type="text/javascript">
$(document).on('ready', function(event) {

    // this method select all Class «mystory-link» in the «document»
    $(document).on('click', ".mystory-link", function(event){
        // stop the events by default in the anchors
        event.preventDefault();
        event.stopPropagation();

        // set link in one var
        var post_link = $(this).attr("href");

        // load the content in div
        $("#mystory-container").html('Loading...');
        $("#mystory-container").load(post_link);
    });

});

</script>
</body>
</html>

Related Posts: