动态生成的锚HREF调用函数不起作用

如果已经提出这样的问题,我很抱歉,但是我已经查看了“相关问题”,我认为这里的任何内容都与我的相符,所以请在我尝试提出问题时请耐心等待我如何去为此,我走了。 好的,我会把你的截图推荐给你。我的两个表是使用Javascript生成的,一个是静态的,我没有在listModulesWithinScene表中注释掉tbody标签。 http://img852.imageshack.us/i/haildstabletable.jpg/(点击链接查看图片) 这是我的HTML代码的简化版本,适合那些感兴趣的人。我对这个网站很陌生,尽管我从搜索引擎(谷歌)那里潜藏。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,regular' rel='stylesheet'
          type='text/css' />
    <link href="cssHomeAutomaionInterface.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/SwitchContent.js"></script>
    <script type="text/javascript" src="Scripts/ScrollingImagesInHeader.js"></script>
    <script type="text/javascript" src="Scripts/XMLReaderWriter.js"></script>
    <script type="text/javascript" src="Scripts/Main.js"></script>
    <script type="text/javascript" src="Scripts/PageSpecific/Home.js"></script>
</head>
<body>
    <!-- ... -->
            <div id="home" class="container">
                <div id="menuHome" class="submenu">

                </div>
                <div id="contentHome" class="content">
                    <h1>Home Page</h1>
                    <div id="moduleListArea">
                        <table id="listModules" class="data">
                            <caption>Lights and Devices</caption>
                            <thead>
                                <tr>
                                    <th style="width: 100px;">Module ID#</th>
                                    <th>Module Name</th>
                                    <th style="width: 60px;">Status</th>
                                    <th style="width: 150px">Action</th>
                                </tr>
                            </thead>
                            <!--<tbody>
                                <tr style="color: Green;" title="Dimmer">
                                    <th>AB.CD.EF</th>
                                    <td>2x Floor Lamp</td>
                                    <td>75%</td>
                                    <td>
                                        <a href="#">Toggle</a>
                                        <div style="float: right;">
                                            <input style="width: 40px;" id="module1" value="75" />
                                            <a href="#">Set</a>
                                        </div>
                                    </td>
                                </tr>
                                <tr style="color: Blue;" title="Switch">
                                    <th>AB.CD.EE</th>
                                    <td>Bedside Fan</td>
                                    <td>ON</td>
                                    <td>
                                        <a href="#">Toggle</a>
                                    </td>
                                </tr>
                            </tbody>-->
                        </table>
                    </div>
                    <div id="sceneListArea" style="width: 50%; float: left;">
                        <table id="listScenes" class="data">
                            <caption style="text-align: left;">Scenes</caption>
                            <thead>
                                <tr>
                                    <th>Scene Name</th>
                                    <th style="width: 80px">Action</th>
                                </tr>
                            </thead>
                            <!--<tbody>
                                <tr>
                                    <td>Welcome Home</td>
                                    <td><a href="#">Toggle</a></td>
                                </tr>
                                <tr>
                                    <td>All Lights Off</td>
                                    <td><a href="#">Toggle</a></td>
                                </tr>
                            </tbody>-->
                        </table>
                    </div>
                    <div id="modulesWithinSceneListArea"
                         style="width: 50%; float: right;">
                        <table id="listModulesWithinScene" class="data">
                            <caption style="text-align: right;">Lights and Devices Within Scene</caption>
                            <thead>
                                <tr>
                                    <th style="width: 100px;">Module ID#</th>
                                    <th>Scene Name</th>
                                    <th style="width: 50px">Level</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>1</th>
                                    <td>2x Floor Lamp</td>
                                    <td>50%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- ... -->
</body>
</html>
</code>
现在,让我继续描述我的问题。 所以无论如何,我想调用代码部分的函数:
// Create a new anchor tag and name it "List."
var a_set = document.createElement("a");
a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row" + r +
    "_toggle";<br />
a_set.id = "listScenes_row" + r + "_set";
a_set.appendChild(document.createTextNode("List"));
我想要javascript:ListAllModulesWithinScene(...)在引号内调用PageSpecific / Home.js中的函数(ListAllModulesWithinScene(sceneName)),但如果单击List链接则没有任何反应;到目前为止,它没有用。这是我试图调用的功能。
function ListAllModulesWithinScene(sceneName)
{alert("test");
    /* The part of the code that I took out fills up the table with the list of modules
        that are part of the scene, each module having different levels/settings. */
}
预期的结果是我想看到警告消息框只是为了确保它在我调出代码生成数据行之前有效,比如说......
function ListAllModulesWithinScene(sceneName)
{
    /*listModulesWithinScene = document.getElementById("listModulesWithinScene");

    // Delete the tbody tag if it does not exist and create a enw tbody tag.
    if(listModulesWithinScene.getElementsByTagName("tbody") != null)
        listModulesWithinScene.removeChild("tbody");
    var listModulesWithinScene_tBody = document.createElement("tbody");

    var xmlRows = xmlObj.childNodes[2].getElementsByTagName("Scene");

    for (var r = 0; r < xmlRows.length; r++)
    {
        if (xmlRows[r].getAttribute("name") == sceneName)
        {
            var moduleRow = xmlRows[r].getElementsByTagName("Module");
            if (moduleRow.length > 0)
            {
                var row = document.createElement("tr");
                for (var msr = 0; msr < moduleRow.length; msr++)
                {
                    var moduleRow2 = xmlObj.childNodes[1].getElementsByTagName("Module");
                    for (var mr = 0; mr < xmlRow2.length; mr++)
                    {
                        if (moduleRow[mr].getAttribute("id") ==
                            xmlObj.childNodes[1].childNodes[mr].getAttribute("id"))
                        {
                            var td_id = document.createElement("th");
                            td_id.appendChild(
                                document.createTextNode(moduleRow.getAttribute("id")));
                            td_id.setAttribute("id", "listModulesFromScene_row" + r + 
                                "_id");
                            row.appendChild(td_id);

                            var td_name = document.createElement("td");
                            td_name.appendChild(
                                document.createTextNode(moduleRow2.getAttribute("name")));
                            td_name.setAttribute("id", "listModulesFromScene_row" + r + 
                                "_name");
                            row.appendChild(td_name);

                            var td_level = document.createElement("td");
                            td_level.appendChild(
                                document.createTextNode(moduleRow.getAttribute("level")));
                            td_level.setAttribute("id", "listModulesFromScene_row" + r + 
                                "_level");
                            row.appendChild(td_level);
                        }
                    }
                }
            }
        }
    }
    listModulesWithinScene_tBody.appendChild(row);
    listModulesWithinScene.appendChild(listModulesWithinScene_tBody);*/
}
为了帮助更好地理解我的表格生成方式,我想发布我的整个代码。我可以提供有关我的问题的更多详细信息,但这是我现在可以提供的所有内容。 这是我目前拥有的XMLReaderWriter.js文件。 / * 在加载和保存XML文件时,尝试保持XML文件的有序性是有帮助的 并且格式良好,所以最好不要修改XML文件,除非你知道自己在做什么。 XML文件的结构如下:
<?xml version="1.0" encoding="utf-8" ?>
<HomeAutomationInterface>
<Setup>
<Location longitude="" latitude="" />
</Setup>
<Modules>
<!-- The first row is an example. -->
<Module id="1" name="module name" level="ON" type="dimmer">
<!-- ... -->
</Modules>
<Scenes>
<!-- the first row is an example. It can contain multiple modules. -->
<scene name="Scene Name">
<module id="1" level="50">
<module id="2" level="60">
<!-- ... -->
</scene>
<!-- ... -->
</Scenes>
<Timers>
<!-- The following four rows are an example. For DST, sunrise and sunset
is dependent in longitude and latitude. How this works is this:

1. Go to this website and enter your address information.
http://stevemorse.org/jcal/latlon.php

2. Go here and enter your today's date, followed by longitude and latitude,
and time zone: http://www.weatherimages.org/latlonsun.html

3. You should get your information related to sunrise and sunset. It should
look like this:

Thursday 
10 March 2011         Universal Time - 5h            

SUN
Begin civil twilight      06:30                 
Sunrise                   06:54                 
Sun transit               12:48                 
Sunset                    18:42                 
End civil twilight        19:06

Now that's how you get your times for your sunruse and sunset.
-->
<timer name="Timer Name 1" type="regular">
<regular time="hour:minute:second:millisecond">
<module id="1" level="50">
<!-- ... -->
</regular>
</timer>
<timer name="Timer Name 2" type="regular">
<regular time="hour:minute:second:millisecond">
<scene name="Scene Name">
<!-- ... -->
</regular>
</timer>
<timer name="Timer Name 3" type="DST">
<DST occour="sunrise|sunset" offsetDir="later|sooner"
offset="hour:minute:second:millisecond">
<module id="1" level="75">
<!-- ... -->
</DST>
</timer>
<timer name="Timer Name 4" type="DST">
<DST occour="sunrise|sunset" offsetDir="later|sooner"
offset="hour:minute:second:millisecond">
<scene name="Scene Name">
<!-- ... -->
</DST>
</timer>
<!-- ... -->
</Timers>
</HomeAutomationInterface>

It's a long documentation, but it helps to understand what this XML structure is all about.
*/

// Not for Internet Explorer 6 or below.
var xmlDoc;
var xmlObj;

// For HTML tables (<table>)
var listModules;
var listScenes;
var listModulesWithinScene;

// For HTML text boxes
var inputLongitude;
var inputLatitude;

function LoadXML()
{
    // ActiveXObject will have to be checked first to see if it's defined. Otherwise, if you
    // try to check XMLHttpRequest first, even if Internet Explorer supports it, you will get
    // "Access Denied" in Internet Explorer and perhaps not in Firefox.
    if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.load("HomeAutomationInterface.xml");
        PopulateFromXML();
    }
    else
    {
        // If this is the only code in this function, then you will need to put all your
        // project in the server, since Internet Explorer has a "Same Origin Policy" which
        // I believe that the open method with "GET" causes a problem in Internet Explorer
        // but did not cause a problem in Firefox. In order to rectify the problem, the code
        // inside if(window.ActiveXObject) makes use of ActiveX.
        xmlDoc = new XMLHttpRequest();
        xmlDoc.open("GET", "HomeAutomationInterface.xml", null)
        xmlDoc.send(null);
        if (xmlDoc.status == 200)
        {
            xmlDoc = xmlDoc.responseXML;
            PopulateFromXML();
        }
    }
}

function PopulateFromXML()
{
    listModules = document.getElementById(
        "listModules").getElementsByTagName("tbody");

    // Gather the text fields for location data.
    inputLongitude = document.getElementById("inputLongitude")
    inputLatitude = document.getElementById("inputLatitude")

    // Firefox's DOM Parser treats whitespaces as text nodes, including
    // line breaks.
    removeWhitespace(xmlDoc.documentElement);

    // Send the document's root element to the XML Object variable.
    xmlObj = xmlDoc.documentElement;

    // Perform the checks and populate the tables
    // and any other elements that are needed.
    if (xmlObj.tagName == "HomeAutomationInterface")
    {
        // Check to be sure the first node is the "Setup" node. It contains the
        // location node.
        if ((xmlObj.childNodes[0].tagName == "Setup") &&
            (xmlObj.childNodes[0].childNodes[0].tagName == "Location"))
        {
            // Copy the data from one of the attributes to the respective text boxes.
            inputLongitude.value = xmlObj.childNodes[0]
                .childNodes[0].getAttribute("longitude");
            inputLatitude.value = xmlObj.childNodes[0]
                .childNodes[0].getAttribute("latitude");
        }
        // The second node within the root element is Modules node.
        // This will be implemented.
        if (xmlObj.childNodes[1].tagName == "Modules")
        {
            //TODO: Implement the XML-to-Table translation that gets info
            // about modules.
            listModules = document.getElementById("listModules");
            var listModules_tBody = document.createElement("tbody");
            var xmlRows = xmlObj.childNodes[1].getElementsByTagName("Module");

            for (var r = 0; r < xmlRows.length; r++)
            {
                var xmlRow = xmlRows[r];
                var row = document.createElement("tr");

                var td_id = document.createElement("th");
                td_id.appendChild(document.createTextNode(xmlRow.getAttribute("id")));
                td_id.setAttribute("id", "listModules_row" + r + "_id");
                row.appendChild(td_id);

                var td_name = document.createElement("td");
                td_name.appendChild(document.createTextNode(xmlRow.getAttribute("name")));
                td_name.setAttribute("id", "listModules_row" + r + "_name");
                row.appendChild(td_name);

                var td_level = document.createElement("td");
                td_level.appendChild(document.createTextNode(xmlRow.getAttribute("level")));
                td_level.setAttribute("id", "listModules_row" + r + "_level");
                row.appendChild(td_level);

                if (xmlRow.getAttribute("type") == "dimmer")
                {
                    row.style.color = "Green";

                    // Create a new table cell for a dimmer. This will include a toggle,
                    // a text box, and a set button.
                    var td_dimmer = document.createElement("td");

                    // Create a new anchor tag and, set the href to #, and name it "Toggle."
                    var a_toggle = document.createElement("a");
                    a_toggle.href = "#";
                    a_toggle.id = "listMoudles_row" + r + "_dimmer_toggle";
                    a_toggle.appendChild(document.createTextNode("Toggle"));

                    td_dimmer.appendChild(a_toggle);

                    // Create a new div element to hold a text box and a set button.
                    var div_floatright = document.createElement("div");
                    div_floatright.style.float = "right";

                    // Create a new text box and append it to the div element.
                    var input_level = document.createElement("input");
                    input_level.type = "text";
                    input_level.name = "listModules_row" + r + "_inputLevel";
                    input_level.id = "listModules_row" + r + "_inputLevel";
                    input_level.style.width = "40px";

                    div_floatright.appendChild(input_level);

                    // Create a new anchor tag, set the href to #, and name it "Set."
                    var a_set = document.createElement("a");
                    a_set.href = "#";
                    a_set.id = "listMoudles_row" + r + "_dimmer_set";
                    a_set.appendChild(document.createTextNode("Set"));

                    div_floatright.appendChild(a_set);

                    // Append the div element to the table cell.
                    td_dimmer.appendChild(div_floatright);

                    // Finally, append the table cell to the row.
                    row.appendChild(td_dimmer);
                }
                else if (xmlRow.getAttribute("type") == "switch")
                {
                    row.style.color = "Blue";

                    // Create a new table cell for a dimmer. This will include a toggle,
                    // a text box, and a set button.
                    var td_switch = document.createElement("td");

                    // Create a new anchor tag and, set the href to #, and name it "Toggle."
                    var a_toggle = document.createElement("a");
                    a_toggle.href = "#";
                    a_toggle.id = "listMoudles_row" + r + "_dimmer_toggle";
                    a_toggle.appendChild(document.createTextNode("Toggle"));

                    td_switch.appendChild(a_toggle);

                    row.appendChild(td_switch);
                }
                else
                {
                    row.style.color = "Black";
                    row.appendChild(document.createTextNode("No actions available."));
                }

                listModules_tBody.appendChild(row);
            }
            listModules.appendChild(listModules_tBody);

            // Uncomment this code and run the example.
            //alert(listModules_row0_name.textContent);
        }
        // The third node within the root element is Scenes node.
        // You need modules in order for scenes to work.
        // This will be implemented.
        if (xmlObj.childNodes[2].tagName == "Scenes")
        {
            listScenes = document.getElementById("listScenes");
            var listScenes_tBody = document.createElement("tbody");
            var xmlRows = xmlObj.childNodes[2].getElementsByTagName("Scene");

            for (var r = 0; r < xmlRows.length; r++)
            {
                var xmlRow = xmlRows[r];
                var row = document.createElement("tr");

                var td_name = document.createElement("td");
                td_name.appendChild(document.createTextNode(xmlRow.getAttribute("name")));
                td_name.setAttribute("id", "listScenes_row" + r + "_name");
                row.appendChild(td_name);

                row.appendChild(td_name);

                var td_actions = document.createElement("td");

                // Create a new anchor tag and name it "Toggle."
                var a_toggle = document.createElement("a");
                a_toggle.href = "#";
                a_toggle.id = "listScenes_row" + r + "_toggle";
                a_toggle.appendChild(document.createTextNode("Toggle"));

                // Create a new anchor tag and name it "List."
                var a_set = document.createElement("a");
                a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row" + r +
                    "_toggle";
                a_set.id = "listScenes_row" + r + "_set";
                a_set.appendChild(document.createTextNode("List"));

                td_actions.appendChild(a_toggle);
                td_actions.appendChild(a_set);

                row.appendChild(td_actions);

                listScenes_tBody.appendChild(row);
            }
            listScenes.appendChild(listScenes_tBody);
        }
        // The last element is the Timers node.
        // This will either activate the scene or turn on, off,
        // dim, brighten, or set the light level of the module if
        // it is the light module or turn on or off the appliance
        // module. This will be implemented.
        if (xmlObj.childNodes[3].tagName == "Timers")
        {
            //TODO: Implement a XML-to-Table parser that parses the XML data
            //      from the timers tag into the timer table.
        }
    }
}

// I stumbled across http://www.agavegroup.com/?p=32 and I borrowed the code from
// http://stackoverflow.com/questions/2792951/firefox-domparser-problem
// It took me a week to debug all my code until I find out what's going on with Firefox's
// DOM Inspector.
function removeWhitespace(node)
{
    for (var i = node.childNodes.length; i-- > 0; )
    {
        var child = node.childNodes[i];
        if (child.nodeType === 3 && child.data.match(/^s*$/))
            node.removeChild(child);
        if (child.nodeType === 1)
            removeWhitespace(child);
    }
}
现在关于我的背景信息,我这样做是为了COP2822(Web脚本)的项目,所以它只是Javascript而不是服务器端,所以我忍受了很多痛苦,但能够做到通过,所以我的Javascript经验最终是值得的。不过,在我参加COP2822之前,我确实有一些Javascript经验。     
已邀请:
欢迎来到SO。考虑到您复制粘贴您的代码
a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row"
           + r + "_toggle)";//<br />
你的js代码中间有一个奇怪的br标签,你在函数调用中丢失了
)
。 如果你还有问题,请发帖,我会尝试讨论。我建议您的浏览器或扩展程序提供一个javascript控制台。在我看来,它对调试非常宝贵。     
我想你想要在sceneName参数值周围引用(转义):
a_set.href = "javascript:ListAllModulesWithinScene("listScenes_row" + r + "_toggle")";
    

要回复问题请先登录注册