jquery will not detect link click from loaded html

Page 1 of 1

4 Replies - 10896 Views - Last Post: 23 December 2011 - 02:23 PM

#1 creativecoding   User is offline

  • Hash != Encryption
  • member icon


Reputation: 931
  • View blog
  • Posts: 3,216
  • Joined: 19-January 10

jquery will not detect link click from loaded html

Posted 22 December 2011 - 11:33 PM

So I'm using jquery for a small project of mine and it seems as if loaded a's will not trigger my javascript when clicked. This worked before though, when the HTML wasn't loaded in.
Is This A Good Question/Topic? 0
  • +

Replies To: jquery will not detect link click from loaded html

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4303
  • View blog
  • Posts: 13,677
  • Joined: 08-June 10

Re: jquery will not detect link click from loaded html

Posted 23 December 2011 - 02:01 AM

hard to say without code …
Was This Post Helpful? 0
  • +
  • -

#3 creativecoding   User is offline

  • Hash != Encryption
  • member icon


Reputation: 931
  • View blog
  • Posts: 3,216
  • Joined: 19-January 10

Re: jquery will not detect link click from loaded html

Posted 23 December 2011 - 02:47 AM

Here's the "viewing" page where the user is and the content will be displayed:

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>FJmobile</title>
    <link href="v/user.css" type="text/css" rel="stylesheet">
	<script src="v/jquery-latest.js" type="text/javascript"></script>
	<script src="v/user.js" type="text/javascript"></script>
</head>

<body>
<div id="wrap">
    <div class="header">
        <div class="logo">
            <a href="index.php"><img src="http://i.imm.io/br0J.png" alt="Funnyjunk Mobile" /></a>
        </div>
        <div class="button" id="show">
            <a href="#">Menu</a>
        </div>

        <div class="clear-float"></div>
        <div class="nav">
            <ul>
            	<li><h2>Version 3</h2></li>
                <li><a href="index.php">Home</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="contact.php">Contact/Bugs</a></li>
                <li><a href="#" onclick="alert('Not available yet');">Login</a></li>
            </ul>
            <div id="hide">
                <a href="#">&laquo; hide menu &raquo;</a>
            </div>
        </div>
    </div>

    <div class="content">
        <?php
        echo $page['content'];
        ?>
    </div>
</div>
</body>
</html>



Here is user.js, where clicks are handled:
$(document).ready(function() { 
    var picture_clicked = false;
    var picture_width = 100;
    var picture_height = 100;
    var pic = $("img#funny_picture");
    var loader = '<img src="v/images/loader.gif" alt="Loading..." />';
    
    
    $('.nav').hide();
    $('#show').click(function (){
	$('.nav').slideDown("slow");
    });
    $('#hide').click(function (){
	$('.nav').slideUp("slow");
    });
    
    
    var sPath = window.location.pathname;
    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
    if (sPage.substring(0, 9) != "index.php") {
    	$('div.content').html(loader).load('inc/ajax/getPost.php?do=next');
    }
    
    $.ajaxSetup ({
    	cache: false
    });
	
    $("#funny_picture").click(function() { 
        if(!picture_clicked){
        	picture_width = pic.width();
        	picture_height = pic.height();
        	picture_clicked = true;
		$("#funny_picture").animate({ 
		    height: "150%", 
		    width: "100%", 
		}, 1000);
	} else {
		picture_clicked = false;
		$("#funny_picture").animate({ 
		    height: picture_height + "px", 
		    width: picture_width + "px", 
		}, 1000);
	}
    });
     
    $("#next_btn").click(function() {
    	var loadUrl = 'inc/ajax/getPost.php?do=next';
    	$('div.content').scrollUp("slow").load(loadUrl).scrollDown("slow");
    });
    
    $("#prev_btn").click(function() {
    	var loadUrl = 'inc/ajax/getPost.php?do=prev';
    	$('div.content').scrollUp("slow").load(loadUrl).scrollDown("slow");
    });
    
});



And here's inc/ajax/getPost.php
<?php
sleep(1);
require "../fj.class.php";
$fj = new fj();
if(!isset($_SESSION)){
	session_start(); // Remember, AJAX is after the page is sent so we must restart our session
}
if($_GET['do'] == "next"){
	$_SESSION['cid']++;
} else {
	$_SESSION['cid']--;
}
$info = $fj->getPicture($_SESSION['top'][$_SESSION['cid']]['fjid']);
echo '<div class="post-item">
		<h2>' . $info['title'] . '</h2>
		<div class="post-image"><img id="funny_picture" src="data/funny_pictures/' . $info['picture'] . '" alt="You must enable pictures in your browser to view"></div>
		<p>
		' . $info['uploader'] . '<br>
		Thumbs: ' . $info['thumbs'] . '<br>
		</p>
		<div class="post-nav">
            	<ul>
            		<li><a href="#" id="back_btn">« Back</a></li>
                	<li><a href="#" id="next_btn">Next »</a></li>
                </ul>
            </div>
            ';
?>

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4303
  • View blog
  • Posts: 13,677
  • Joined: 08-June 10

Re: jquery will not detect link click from loaded html

Posted 23 December 2011 - 05:11 AM

I think the problem is AJAX. you try to access a yet non-existent element (the image, line 4) which is created through an asynchronous callback later in the script (line 20), but even later accesses (lines 28ff) are still called before the image is created.
Was This Post Helpful? 1
  • +
  • -

#5 creativecoding   User is offline

  • Hash != Encryption
  • member icon


Reputation: 931
  • View blog
  • Posts: 3,216
  • Joined: 19-January 10

Re: jquery will not detect link click from loaded html

Posted 23 December 2011 - 02:23 PM

Ah, perfect.

I've updated the script so that there's two new functions. One accesses the buttons and such and the other loads a new page and upon the new page being loaded, calls the first function.

Thanks a ton.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1