用AJAX加载div后无法执行Javascript代码

Question

I have a php file called landscape.php. In here, I invoke another php file called colorList.php. Inside this file I have 3 buttons to select the number of colors: 4,5 and 6. When I click in any button, I call a js file which has an ajax function to show in the div=container the proper set of selects.

Landscape.php

<table width="980">
<tr>
<td width="1000" style="vertical-align: top">
    <?php include('colorList.php'); ?>
</td>
    <td width="700" style="vertical-align: top">
    <div id="contenido">
    </div>
    </td>
</tr>
</table>

code.js

function showData(dataType)
{

    var capa=document.getElementById("content");

    var ajax=newAjax();

    ajax.open("POST", "test.php", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("d="+dataType);

    ajax.onreadystatechange=function()
    {
        if (ajax.readyState==4)
        {
            capa.innerHTML=ajax.responseText;
        }
    }
}

In test.php I have that If dataType is 1 then I show 4 selects, if 2 then 5 selects and if 3 then 6 selects. All of them have the list of colors retrieved from the db using mysql. The idea is not to repeat any color in any selector, for that, I disable whatever color I already selected with this script:

function loadColors() { 
                for (i = 0;i < document.test.elements.length;i++) {
                    for (j = 0;j < document.test.elements[i].options.length;j++) {
                        document.test.elements[i].options[j].disabled = false;
                        for (k = 0;k < document.test.elements.length;k++) {
                            if (i != k) {
                                if (document.test.elements[i].options[j].text == document.test.elements[k].options[document.test.elements[k].selectedIndex].text)
                                    document.test.elements[i].options[j].disabled = true;                               
                            }
                        }       
                    }
                }               
            }   

And then, the selectors are defined like this:

<select name="color1" id="color1" onchange="loadColors()">

This code works perfectly fine if I don't use the ajax call. That is, if I load everything in a single php page, for example, I copy and paste what I have in test.php in landscape.php, everything is working. But as soon as I load that content with AJAX, it doesn't.

My problem is not with the javascript nor the php, cause that is working fine. My problem is that as soon as I add AJAX to the equation, it stops working. So I guess it is a matter of invoking the loadColors() function. I tried having the code in landscape.php, in test.php, calling code.js (where the ajax and loadColors function is), load the script in the body of landscape.php but nothing...

Any help, please?

Answer 1

As I said in my comment, the problem is (I think) in your selects themselves. The selects are being created by the AJAX call, right? In that event, having an onchange="..." on the select will never actually be handled. DOM events like that are handled on page load. After page load, the DOM can be considered static -- you can add to or remove from the DOM, but if you add an element to the page and try to add an event handler to that new element via the DOM, it will not process.

Instead, you might want to look at how you're attaching that listener. First, I would remove the onchange entirely. It doesn't help. Those are dynamic elements. In order to have your DOM listening to changes on dynamic elements, attach the event itself to a static ancestor of that element. In the case of your code, how about attaching an event to the container that listens for changes to the selects? Try something like this:

// make these available to both functions.
var capa, selectedOptions;

function showData(dataType)
{
    capa=document.getElementById("content");
    var ajax=newAjax();

    ajax.open("POST", "test.php", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("d="+dataType);

    ajax.onreadystatechange=function()
    {
        if (ajax.readyState==4)
        {
            capa.innerHTML=ajax.responseText;
            capa.addEventListener("change", filterSelects);
        }
    }
};

Then, filterSelects might be used somewhat like this:

 var myContainer = document.querySelector(".container"); var selectOptions = []; myContainer.addEventListener("change", filterSelects); /*** * The above code simply sets the stage, * implementing the filterSelects function * in much the same way you would for els * added via AJAX. Note that, as the rest * of your code seems to be going vanilla, * I've rewritten this to be pure vanilla * and not jQuery. ***/ function filterSelects(event) { if(!event.target.matches("select")) return; var workingEl = event.target; var allSelectEls = document.querySelectorAll(".colorSelector"); // First, we'll iterate through the select els, and figure out the // index of the currently active el. This will be the index of that // select in the collection, and will also be used as the index in the // selectOptions array. for (var i=0; i<allSelectEls.length; i++){ // if we are currently looping over the active select... if (allSelectEls[i] == workingEl) { // ... and it has an actual working value if (workingEl[workingEl.selectedIndex].value != "...") { selectOptions[i] = workingEl[workingEl.selectedIndex].value; } else { selectOptions[i] = null; } } // also, while we're here, we'll re-enable all options. for (var j=0; j<allSelectEls[i].options.length; j++){ allSelectEls[i].options[j].removeAttribute("disabled"); } } /***** * jQuery makes this so easy, but here it is as vanilla JS * we will loop through every one of our selectOptions * (remember, that's an array of the select values), and * run an inner loop going through all select elements, * and inside THAT loop through each option in the current select. * loop 'i' = the selectOptions array * loop 'j' = the select collection * loop 'k' = the options in the current select *****/ for (var i=0; i<selectOptions.length; i++){ var currentOptionToDisable = selectOptions[i]; for (var j = 0; j<allSelectEls.length; j++){ var currentSelectEl = allSelectEls[j]; // If the current selectOption is NOT from the current select if (i !== j) { for (var k = 0; k<currentSelectEl.options.length; k++) { currentSelectOption = currentSelectEl.options[k]; // if the value in selectOption = the value of the current option if(currentSelectOption.value == currentOptionToDisable) { // we disable that option. currentSelectOption.disabled = true; } } } } } }; 

 <div class="container"> <select name="color1" id="color1" class="colorSelector"> <option>...</option> <option value="red">Red</option> <option value="orange">Orange</option> <option value="yellow">Yellow</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="indigo">Indigo</option> <option value="violet">Violet</option> </select> <select name="color2" id="color0" class="colorSelector"> <option>...</option> <option value="red">Red</option> <option value="orange">Orange</option> <option value="yellow">Yellow</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="indigo">Indigo</option> <option value="violet">Violet</option> </select> <select name="color3" id="color3" class="colorSelector"> <option>...</option> <option value="red">Red</option> <option value="orange">Orange</option> <option value="yellow">Yellow</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="indigo">Indigo</option> <option value="violet">Violet</option> </select> </div> 

Do note that, in my working example, I have not attached the events to the dynamic elements themselves. You can't. Not if you want them to work. Instead, I've created a listener on a STATIC parent of those dynamic elements. Then, in the handling function, I can check that the target of the change event is the target I want, whether matches('select') or by checking for class or whatever. But the important bit is, if I add more selects or remove them, the listener is affixed to a static part of the DOM and remains unaffected by such shenanigans.

Note also, as this is a pet peeve, I haven't attached my listener to the document or to the body. Find the nearest static ancestor, try to encapsulate your code in the smallest part possible. That's just my soap box, and maybe one day I'll rant on it. But note that I'm attached to the container, and have that container listening, not the document or the body. Just saying.