Problem with Jquery and PHP break function

Question

Hello,

I'm posting simple version of php and Jquery code of the page that I need to create. As you can see, this example contains PHP break functions, and the name of this page is test.php.

The problem is, when I try to open the first part of this page (case 1) Jquery load function successfully is started and successfully load case 2 in the same DIV the second Jquery code for alert message. But if FireFox and Chrome that alert message it would not show up. Why?

Thx.

The code of the compleate page is:

<?php
include_once '../include/config.inc.php';
include_once '../include/options.inc.php';
include_once '../include/security.inc.php';
include_once '../include/functions.inc.php';
include_once '../templates/config.php';
?>
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$("#one").live("click", function(){
$("#xuy").load("test.php?x=2");
});
});
</script>
<script type="text/javascript"> 
$(document).ready(function() {
$('#test').click(function() {
     alert("test for alert message");
   });
 });
</script>

<style>
#xuy{ width:770px; height:230px; border:1px solid #999; background-color:#33FF00;}
#one{ border:1px solid #F00; width:555px; background-color:#FFFF00;}
#two{ border:1px solid #000; width:355px; background-color:#CCCCCC;}
#three{ border:1px solid #ccc; width:255px; background-color: #00FFFF;}
</style>
<?
if (!isset($x)) $x = '';
switch ($x)
{
default:
case 1:
?>
<div id="xuy"><div id="one">DIV one</div></div>
<?
break;
case 2:
?>


<div id="two">DIV two</div><br>
<div id="test">click for Jquery alert</div>


<?
}
?>

Answer 1

I think the problem is not with the break, but the following:

When you first open the page, the $(document).ready handler is fired. In this handler you try to bind to the event $('#test').click, but #test does not exist yet!

Then you load the second page by calling:

$("#xuy").load("test.php?x=2");

This starts an AJAX call and inserts the result into the DIV called "xuy". You insert $(document).ready again into the HTML, but the handler is not called, because the document is already "ready". So your event handler to $('#test').click ist not attached!

You would have to do this inside a tag in the loaded file, such as:

<div id="two">DIV two</div><br>
<div id="test">click for Jquery alert</div>
<script>
   $('#test').click(function() {
     alert("test for alert message");
     });
   });
</script>

Answer 2

I think you have to use jQuery's live event handler.

$('#test').live('click', function() {
    alert("test for alert message");
});

click only binds to elements that are in the DOM when the page finished loading. You add div#test to the DOM at a later point, so you need to either use live or only bind the click event after loading the second div

Answer 3

It's difficult to tell what's happening without seeing the generated source, but I think I see a few problems:

• Your second switch case is missing a break statement.
• You are binding a click event to $('#test'), which doesn't exist on the initial page load. Consider using live() instead.
• It looks like the content you're loading into the "xuy" div is this entire page, complete with its JavaScript code. That means you are reintroducing duplicate code into the page, which could be confusing things.

Answer 4

default: in a switch statement must always come last. Move it to the end of your switch statement.

default: is a catch-all case and the parser will always execute that case if nothing leading up to it matches.

switch documentation

Answer 5

This is the complete code that is working fine and without errors.
Thanks again everyone!

<?php

include_once '../include/config.inc.php'; include_once '../include/options.inc.php'; include_once '../include/security.inc.php'; include_once '../include/functions.inc.php'; include_once '../templates/config.php'; ?>

$(document).ready(function(){ $("#one").live("click", function(){ $("#xuy").load("t.php?x=2"); }); });

DIV one

DIV two

click for Jquery alert $('#test').live('click', function() { alert("test for alert message"); });