Click function calling javascript then redirecting to php page

Question

I'd like to make an edit function for my posts. So far You can Post and See your post(s) from the admin page, which is operated by mySQL but not so long ago I wanted to make an edit button. The theory would be, when you click on the edit button javascript gets the id of the post element, then after running a mysql query where the id = PostID then it would redirect to a page, where you could edit the post. The html inputs value's would be the datas read out from mysql, but the javascript just doesn't want to fire up.

The post's php/html looks like this:

    while($row = mysqli_fetch_array($run)) {
echo '<article id="post" data-postid="'.$row["id"].'">
    <ul>
        <li class="id">'.$row["id"].'</li>
        <li class="title">'.$row["title"].'</li>
        <li class="postedBy">'.$row["postedBy"].'</li>
        <li class="postedBy">'.$row["dDate"].'</li>
        <li class="prio">'.$row["priority"].'</li>
        <li class="icons"><div class="do" data-action="edit"><i class="fa fa-pencil-square-o"></i></div><div class="do" data-action="delete"><i class="fa fa-times"></i></div></li>
    </ul>
</article>';

Javascript looks like this ( it is called admin_edit.js ):

    $('#post').on('click', '.do', function(){
        var self = $(this); // cache $this
        var action = self.data('action'); // grab action data edit/delete
        var postid = parent.data('postid'); // grab post id from data-postid

        // edit action
        if (action == 'edit') {
            // send js to php
            $.post("../admin/post_edit.php", { postId: postid } );
        }
        // delete action
        else if (action == 'delete'){
            // send ajax request
            // Something.
        };

    });

To understand my folder structure: We are in the root/admin folder and on the root/admin/admin.php page. The javascript is in the root/js folder and is called root/js/admin_edit.js.

Why doesn't the js want to fire up ?

Thanks in Advance !

Answer 1

Your #post does not exist when you define its click event. You need to define the event when it already exists. You can register the event for #main , but you can also register the event in the callback of your request. It is better to register it in the callback if possible.