jQuery .live fireing multiple times!_问答_开发者

开发者 https://www.devze.com 2022-12-24 15:19 出处：网络

Greetings Guru\'s, This is a little hard to explain, but I\'ll give it a shot. I have a quick question regarding to the .live() function in JQuery.I\'m going to simplify the example here.I have a pag

相关专题：jquery php

Greetings Guru's, This is a little hard to explain, but I'll give it a shot.

I have a quick question regarding to the .live() function in JQuery. I'm going to simplify the example here. I have a page "index.php" that has a container "#display_files_container" which is populated with anchor links that are generated dynamically by a different page "process.php". The links are loaded into that same <div> when those links are selected based on the attributes of that link. See Examples:

INDEX.PHP

<html>

<head><title>index.php</title>

<!-- this function below loads process.php and passes it the dirid variable via post.  I then use this post variable inside of process.php to pull other links from the database -->

<script language="text/javascript">
     $('.directory').live("click", function() {
          $('#display_files_container').load('plugins/project_files/process.php', {dirid: $(this).attr('dirid')});
     });
</script>

</head>

<?php 
/*This code initial populates the link array so we have the first links populated before the users clicks for the first time*/
some code to fetch the $current_directory_list array from the database initially....
>?

<body>
<div id='display_files_container'>

<?php

/*Cycle through the array and echo out all the links which have been pulled from DB*/
for($i=0;$i<$current_directory_count;$i++) {
  echo "<a href='#' class='directory' dirid='".$current_directory_list[$i]['id']." '>".$current_directory_list[开发者_StackOverflow$i]['directory_name'].
  "</a> ";
}

?>

</div>
</body>
</html>

PROCESS.PHP

this file includes code to populate the $current_directory_list[] array from the database based on the post variable "$_POST['dirid']" that was sent from the .click() method in index.php. It then echo's the results out and we display them in the #display_files_container container. When you click on those links the process repeats.

This works..... you can click though the directory tree and it loads the new links every time. However, it seems to want to .load() the process.php file many times over for one click. The number of times process.php is loaded seems to increase the more the links are clicked. So for example you can click on a link and firebug reports that process.php was loaded 23 times..... Eventually I would imagine I would record a stackoverflow. Please let me know if you have any ideas. Are there any ways that I can assure that .live() loads the process.php file only once?

Thanks, -cs

What happens, is that everytime you click a link, you bind new click event handler to every link. This is possible because there can be multiple handlers for the particular event. You must return false in your handler to stop the event bubbling.

Update: I'm not sure why the handler gets bound multiple times, but my guess is that it has something to do with the special nature of 'live event' implementation. See chapter Event Delegation from the docs:

The handler passed to .live() is never bound to an element; instead, .live() binds a special handler to the root of the DOM tree.

Another solution is to use bind() or click() instead of live() and call it explicitly after the ajax has been loaded:

function bind_link_handler() {
    $('.directory').click(function() {
        $('#display_files_container').load('...', bind_link_handler);
    })
}

Just so everyone is in the loop my new line of .live() code looks like this:

$('.directory').live("click", function() {
  $('#display_files_container').load('plugins/project_files/process.php', {dirid: $(this).attr('dirid')});
  return false;
});