由于多个JavaScript包含/要求，jQuery事件多次触发

Question

I have a problem here and it's making me mad. I maintain a legacy php system. It's badly organized, no frameworks are used and a lot of other problems, for example, at least 5 different query versions are used in different parts of the system.

So my problem right now is this, I have a search form, when a button is clicked it shows a list of items, lets call this a list of "A" objects. In each A item, there is an expand /toggle button to show the B items that belong to A (this is done using ajax, by setting a specific div's html to the ajax response). Then each B also has an expand/toggle button to show the C items that belong to B.

What is happening: I click to search, all A are shown. I click on the expand to show the B items of one A object, they are shown. I click B to hide it, it hides and then show again. If I click it one more time, it hides, shows and hide. So it is like every ajax request is including the javascript code and running it.

I think this is pretty much an organization problem, I am not knowing how to include/require and insert the js correctly. I've been trying to solve this issue since yesterday and I think I've seen the code so many times that I can't think out of the box.

So here's some of the organization (I changed the names because there are some business rules):

SearchResults.php -> Declares a class that has static methods to print out HTML of each item A, B and C and some other helper methods. To make stuff "work", it has a require "js.php"; otherwise the A expand button does not work because it does not exist at the time the js is executed and no function is bound.

search.php -> the HTML form with all the search options, nothing important.

js.php -> the javascript stuff, why is it in a ".php"? I can't even remember, but I think it is because with the php I can require/include:

<script type="text/javascript" src="../util/js/jquery/1.8.1/jquery.min.js"></script>

<script>

var jQ = jQuery.noConflict(true);

jQ(document).ready(function() {

  jQ(".loadBfromA").click( function(e) {

    if (div.style.display == 'none')
       alert("was hidden, now is showing");
       //call ajax_B.php
       //response is put into the div using .html(data)

    else
       alert("was showing, now is hidden");
    ...

ajax_B.php -> the ajax that access the database and echoes html code that will be put into the A items div. Here I have to require SearchResults.php, because I call some methods of the class.

Why is it including the jQ(document).ready being executed multiple times? How can I fix it? Is there any way I can reorganize the code?

Is the ajax_B.php, when requiring SearchResults.php, including the js again because SearchResults.php requires js.php? Does this gets echoed and then put into the div?

I can't make a fiddle of this because there is ajax included.

Edit:

I have tried unbind("click").bind("click", ()) and it didn't work.

Answer 1

It looks like the event is being bound multiple times on jQ(".loadBfromA")

I know this is not the cleanest solution out there, but you could rewrite the actual binding:

jQ(".loadBfromA").bind('click.loadbfroma', function(e) {
    // Do your code
    $(this).unbind('click.loadbfroma');
});

That way you can at least be sure that only one event is bound at all times, no matter how many times the code snippet is being included. I know this doesn't really help you with the underlying issue but it's a start.