当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Fix 'onchange' behaviour appended to HTML from two JS files

问题描述:

I'ld like to say that I know almost nothing about html and js, since this is the first time I have to develop something with it.

A part of it is composed as follows:

I have to realize a dropdown menu that let's the user select a Project Name.

When this is done, this Project Name will be associated to a variable.

In order to load the Project Name list, I check an xml file, and save the name in an array.

I found this to help me realize the dropdown menu in a clean way.

- Normally, if the section is written directly in html, it works.

- When I create it in js (to dinamically catch and create the list, and 'append' it to the html, it doesn't respect the 'onchange' behaviour it normally does.

If you know a simplier way to do this, let me know.

In such case, I'm still curious to get the code I wrote to work.

If you need more info let me know.

John.

EDIT:

I forgot to say that the value determined in menu.js has to go back in prjget.js .

I'm searching on the internet how to use something as C's 'return', and how to read this value.

If you guys know somethig, please and thank you for your help.


  • HTML, This is the html:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Load XML With jQuery</title>

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

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <script src="menu.js"></script>

    <script src="prjget.js"></script>

    //Working test

    <select id="PrjLst2" class="jumpmenu">

    <option value="">-- Elenco Progetti --</option>

    <option value="http://google.com/">Google html</option>

    </select>

    //Working test

    <select onchange="if( this.options[this.selectedIndex].value != '' ) location.href=this.options[this.selectedIndex].value;">

    <option value=""></option>

    <option value="http://google.com/">Google</option>

    <option value="http://yahoo.com/">Yahoo!</option>

    <option value="http://ask.com/">Ask.com</option>

    </select>

    </head>

    <body>

    </body>

    </html>

  • menu.js, This is the formatter js:

    // This JS file handles menù behaviour (i.e.: onmouseover, onmouseout, onclick)

    function initJumpMenus() {

    // Turns all <select> elements with the 'jumpmenu' class into jump menus

    var selectElements = document.getElementsByTagName("select");

    for( i = 0; i < selectElements.length; i++ ) {

    // Check for the class and make sure the element has an ID

    if( selectElements[i].className == "jumpmenu" && document.getElementById(selectElements[i].i ) != "" ) {

    jumpmenu = document.getElementById(selectElements[i].id);

    jumpmenu.onchange = function() {

    if( this.options[this.selectedIndex].value != '' ) {

    // Redirect

    location.href=this.options[this.selectedIndex].value;

    }

    }

    }

    }

    }

    window.onload = function() {

    initJumpMenus();

    }

  • prjget.js, This is the JS that reads the Project Names from the xml:

    // Caricamento Elenco Progetti + Creazione Menu Tendina

    $(document).ready(function(){

    $.get('projects.xml', function(read_prj_name){

    $('body').append('<h1> Elenco Progetti </h1>');

    $('body').append('<dl />');

    var PrjLst = new Array();

    var PrjIndx = 0;

    $(read_prj_name).find('project').each(function(){

    //Prelevo il titolo del Progetto

    var $prj = $(this);

    var dataProj = $prj.find("name").text();

    //Popolo un vettore con tutti i riferimenti di Progetto

    PrjLst.push(dataProj);

    });

    //stampo il menu a tendina per la selezione dei progetti

    var html = '<p> ' + PrjLst[PrjLst.length-1] + '</p>';

    html += '<select id="PrjLstMenu" class="jumpmenu">';

    html += '<option value="">-- Elenco Progetti --</option>';

    //ciclo While per indice Progetto

    while(PrjIndx <= PrjLst.length-1){

    html += '<option value="' + PrjLst[PrjIndx] + '">' + PrjLst[PrjIndx] + '</option>';

    PrjIndx++;

    };

    html += '<option value="http://google.com/">Google JS</option>';

    html += '</select>';

    $('dl').append($(html));

    });

    });

  • The xml is formatted as follows:

    <projectEnts>

    <project>

    <displayStatus>Pronto</displayStatus>

    <name>TEST_API</name>

    ...

    </project>

    <project>

    <displayStatus>Pronto</displayStatus>

    <name>TEST_03</name>

    ...

    </project>

    <project>

    <displayStatus>Pronto</displayStatus>

    <name>TEST_02</name>

    ...

    </project>

    </projectEnts>

网友答案:

The trouble with your initJumpMenus function is that it will only find the selects that are in the HTML at that time, so when you add more menus programmatically, it won't have added event handlers for them.

In this case, I'd recommend to replace the entire jump menu script with something like this (since you're using jQuery already anyway):

$(function(){
    $(document).on('change', '.jumpmenu', function(e) {
        window.location.href = $(this).val();
    });
});

This will look for changes to any jumpmenu in the document, and the eventhandler is bound to the document so that it will also catch any new menus that are created in the future.

分享给朋友:
您可能感兴趣的文章:
随机阅读: