Question

我写了一个Ajax-y页面，它显示了ajax请求中的数据行。每行都有一个“删除链接”，允许用户快速删除行，也可以通过ajax。

我的问题是功能范围 -

“main”页面的功能如下所示：

<script language="javascript" type="text/javascript">
window.addEvent('domready', function() {

    function getRows(){
        var myurl = 'myajaxurl.php';
            var req = new Request({
            async:false,
            method: 'get',
            url: myurl,
            data: {'id':'<?php echo $id; ?>'},
            evalScripts:true,
            onSuccess: function(response) {
                $('my_rows_div').set('html',response);
            }
        }).send();
    }

    function deleteRow(rowid){
        alert(rowid);
    }
});

'getRows'函数返回的数据只是一些html行，看起来像这样：

<tr><td>data</td><td><a onclick="deleteRow(1)" href="javascript:void(0);">delete</a></td></tr>
<tr><td>data</td><td><a onclick="deleteRow(2)" href="javascript:void(0);">delete</a></td></tr>

到目前为止一直很好 - 但是当我渲染页面并单击“删除”链接时，我得到“deleteRow未定义”的js错误。

我知道这可能与范围有关，但我不太明白这是如何工作的。如何从返回的ajax数据中引用“父”页面的deleteRow函数？

谢谢！

Answer 1

页面的“全局范围”是“窗口”对象。从HTML属性添加事件处理程序时，默认情况下使用全局范围。这样做：

<script language="javascript" type="text/javascript">
window.addEvent('domready', function() {

function getRows(){
        var myurl = 'myajaxurl.php';
            var req = new Request({
            async:false,
            method: 'get',
            url: myurl,
            data: {'id':'<?php echo $id; ?>'},
            evalScripts:true,
            onSuccess: function(response) {
                $('my_rows_div').set('html',response);
            }
        }).send();
    }

    window.deleteRow = function(rowid){
        alert(rowid);
    }
});

Answer 2

将deleteRow函数移到getRows函数之外，并将两个函数移到事件处理程序之外。

通常，Javascript函数应该在全局范围（或命名空间）中定义;没有嵌套在其他函数中。

javascript范围问题

2 个答案: