Question

I have a story uploading system on my webpage, which uploads stories in a specified folder, and from that it lists their content to the webpage. I made a split, so only 300 chars are shown of the text, when the user clicks it, the rest of it is shown.

Here is my code:

This one lists it:

<?php foreach($dataArray as $data) { ?>
    <div class="visible">
        <?php echo $data[0]; ?>
    </div>
    <div class="hidden">
        <?php echo $data[1]; ?>
    </div>
<?php } ?>

This is my jQuery:

$('.hidden').css('display', 'none');
$('.visible').click(function () {

    $('.hidden').css('display', 'inline');
});

This page(‘tortenetek.php’) is ajaxed to the main page (‘blog.php’). I included Jquery in blog.php like this:

<link href='http://fonts.googleapis.com/css?family=Niconne&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="../css/stilus.css"/>
        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../js/tinybox.js"></script>
        <script type="text/javascript" src="../js/ajax.js"></script>
        <link href="../css/lightbox.css" rel="stylesheet" />
        <script src="../js/lightbox.js"></script>
                <script src="../js/story.js"></script>

Story.js is the script file i’m using.

Thanks folks!

Answer 1

Use .on method to attach event to dynamically added elements.
Change it to

$('.visible').on('click',function () {
     $('.hidden').css('display', 'inline');
});