Fatal编程技术网
  • javascript/
  • Javascript 如何创建其onclick处理程序为匿名函数的超链接？

Javascript 如何创建其onclick处理程序为匿名函数的超链接？

javascript jquery html

Javascript 如何创建其onclick处理程序为匿名函数的超链接？,javascript,jquery,html,closures,flexigrid,Javascript,Jquery,Html,Closures,Flexigrid,我正在尝试动态生成FlexGrid生成表单元格的onclick事件处理程序： // ... preProcess: function (data) { var rows = data.rows; for (var i = 0; i < rows.length; ++i) { var row = rows[i]; // If and only if this condition is true, then // row.cell

我正在尝试动态生成FlexGrid生成表单元格的onclick事件处理程序：

// ...
preProcess: function (data) {
    var rows = data.rows;
    for (var i = 0; i < rows.length; ++i) {
        var row = rows[i];
        // If and only if this condition is true, then
        // row.cell[0] must be converted into a hyperlink.
        if (row.cell[1] != '0') {
            // I don't want to use the href attribute, because that would
            // force me to define a non-anonymous function.
            row.cell[0] = '<a href="javascript:void(0)" id="E'
                        + i + '">' + row.cell[0] + '</a>';
            // So I'm going to try assigning the onclick attribute.
            $('#E' + i).click(function () {
                window.open('doc.php?q=' + this.id, 'D' + this.id,
                            'menubar=0,toolbar=0,directories=0,location=0,status=0,' +
                            'resizable=0,scrollbars=0,width=600,height=300');
            });
            $('#E' + i).click().id = row.cell[4];
        }
    }
    return data;
}
// ...
但是，当我单击生成的超链接时，它们不起作用。有什么问题吗？我对闭包的使用？标记不接受onclick属性

注意：自从我开始使用jQuery以来，我的策略是所有函数都应该是匿名函数。请不要建议我使用普通函数。

看起来您正在使用原始字符串连接创建，然后分配它。。。哪里如果链接不是DOM的一部分，则$'linkID'将找不到任何内容，从而有效地将单击处理程序分配为nothing。jQuery选择器只搜索DOM。

看起来您正在使用原始字符串连接创建，然后分配它。。。哪里如果链接不是DOM的一部分，则$'linkID'将找不到任何内容，从而有效地将单击处理程序分配为nothing。jQuery选择器仅搜索DOM。

使用jQuery或浏览器的本机DOM函数创建元素，并附加事件处理程序：

$('<a href="#" id="E' + i + '"/>').html(row.cell[0]).click(function(e) {
    e.preventDefault();
    // your code
});
使用jQuery或浏览器的本机dom函数创建元素，并附加事件处理程序：

$('<a href="#" id="E' + i + '"/>').html(row.cell[0]).click(function(e) {
    e.preventDefault();
    // your code
});
首先，它看起来不像是在你的后面加上id='E'+i

所以，我猜当调用$'E'+I时，它将返回一个空的jQuery对象。您可以通过提醒$'E'+i.length来检查这一点。0表示未找到任何内容

其次，不需要调用javascript:void0。只需将其替换为，并在匿名函数中调用event.preventDefault即可。您还需要将事件作为一个参数传递给匿名函数。

首先，它看起来不像是在用id='E'+i追加事件

所以，我猜当调用$'E'+I时，它将返回一个空的jQuery对象。您可以通过提醒$'E'+i.length来检查这一点。0表示未找到任何内容

其次，不需要调用javascript:void0。只需将其替换为，并在匿名函数中调用event.preventDefault即可。您还需要将事件作为参数传递给匿名函数。

您正在尝试将onclick事件连接到一个尚不存在的元素上。当时，元素在数组中仅作为文本存在，因为代码尚未添加到DOM中，选择器无法找到它

如果要对事件处理程序使用匿名函数，则必须等到创建元素使其作为对象存在时，才能挂接事件。

您正在尝试将onclick事件挂接到尚不存在的元素上。当时，元素在数组中仅作为文本存在，因为代码尚未添加到DOM中，选择器无法找到它

如果要对事件处理程序使用匿名函数，则必须等待事件连接，直到创建元素使其作为对象存在。

我复制了您的代码，经过一些小的更正后，我使其正常工作。我假设数据引用的是表对象。这是我的代码和虚拟HTML

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>   
  </head>
  <body>
    <table id='myTable'>
      <tr>
        <td>x</td><td>1</td><td>a</td><td>f</td><td>p</td>
      </tr>
      <tr>
        <td>y</td><td>2</td><td>b</td><td>g</td><td>q</td>
      </tr>
    </table>
    <script>
      function preProcess(data) {
        var rows = data.rows;
        for (var i = 0; i < rows.length; ++i) {
        var row = rows[i];
        // If and only if this condition is true, then
        // row.cell[0] must be converted into a hyperlink.
        if (row.cells[1] != '0') {
        // I don't want to use the href attribute, because that would
        // force me to define a non-anonymous function.
          row.cells[0].innerHTML = '<a href="javascript:void(0)" id="E' + i + '">' 
                               + row.cells[0].innerHTML + '</a>';
        // So I'm going to try assigning the onclick attribute.
          $('#E' + i).click(function () {
                  window.open('doc.php?q=' + this.id, 'D' + this.id,
                    'menubar=0,toolbar=0,directories=0,location=0,status=0,' +
                    'resizable=0,scrollbars=0,width=600,height=300');
          });
          //$('#' + id).click().id = row.cells[4];
          }
        }
        return data;
      }  

      $(document).ready(function() {
        preProcess(document.getElementById('myTable'));
      });

    </script>
  </body>
</html>
我的更正如下，我想有些可能是因为你在为帖子复制代码时抄写的：

我把手机换成了手机 我在单元格索引之后添加了innerHTML 我将链接设置为javascript:void而不是javascript.void 我注释掉了$+id.click.id=row.cells[4]；，因为我不知道它做了什么。 随着这些变化，它就像一个魅力

我希望这能有所帮助。

我复制了你的代码，经过一些小的修改，我使它工作了。我假设数据引用的是表对象。这是我的代码和虚拟HTML

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>   
  </head>
  <body>
    <table id='myTable'>
      <tr>
        <td>x</td><td>1</td><td>a</td><td>f</td><td>p</td>
      </tr>
      <tr>
        <td>y</td><td>2</td><td>b</td><td>g</td><td>q</td>
      </tr>
    </table>
    <script>
      function preProcess(data) {
        var rows = data.rows;
        for (var i = 0; i < rows.length; ++i) {
        var row = rows[i];
        // If and only if this condition is true, then
        // row.cell[0] must be converted into a hyperlink.
        if (row.cells[1] != '0') {
        // I don't want to use the href attribute, because that would
        // force me to define a non-anonymous function.
          row.cells[0].innerHTML = '<a href="javascript:void(0)" id="E' + i + '">' 
                               + row.cells[0].innerHTML + '</a>';
        // So I'm going to try assigning the onclick attribute.
          $('#E' + i).click(function () {
                  window.open('doc.php?q=' + this.id, 'D' + this.id,
                    'menubar=0,toolbar=0,directories=0,location=0,status=0,' +
                    'resizable=0,scrollbars=0,width=600,height=300');
          });
          //$('#' + id).click().id = row.cells[4];
          }
        }
        return data;
      }  

      $(document).ready(function() {
        preProcess(document.getElementById('myTable'));
      });

    </script>
  </body>
</html>
我的更正如下，我想有些可能是因为你在为帖子复制代码时抄写的：

我把手机换成了手机 我在单元格索引之后添加了innerHTML 我将链接设置为javascript:void而不是javascript.void 我注释掉了$+id.click.id=row.cells[4]；，因为我不知道它做了什么。 随着这些变化，它就像一个魅力

我希望这能有所帮助。

听起来你想要的是：

为当前和将来与当前选择器匹配的所有元素将处理程序附加到事件

实际上，它允许您为尚不存在的元素创建事件处理程序。 我觉得您只需要对当前代码进行最小的更改就可以实现这一点。在这种情况下，live是您最好的选择，因为您的代码只会从

$('#E' + i).click(function () { ...
到

听起来你要找的是：

为当前和将来与当前选择器匹配的所有元素将处理程序附加到事件

实际上，它允许您为尚不存在的元素创建事件处理程序。 我觉得您只需要对当前代码进行最小的更改就可以实现这一点。在这种情况下，live是您自创建以来的最佳选择 代码只会从

$('#E' + i).click(function () { ...
到

使用jQuery的事件

为了便于查看发生了什么，我还向链接添加了一个类，因为我假设页面上还有其他链接

function preProcess(data) {
    ...
    row.cell[0] = '<a href="#" class="clickMe" id="E' + i + '">' + row.cell[0] + '</a>';
}

jQuery("a.clickMe").live("click", function(event) {
    event.preventDefault();
    window.open('doc.php?q=' + this.id, 'D' + this.id, .....
});
免责声明：我从未使用过FlexGrid，但从您的其他评论来看，您似乎可以在FlexGrid将其放入DOM之前修改内容

在将元素添加到DOM之前，live事件允许挂接单个匿名或非匿名处理程序

见：

.活

将处理程序附加到事件 对于与 当前选择器，现在和在 未来

使用jQuery的事件

为了便于查看发生了什么，我还向链接添加了一个类，因为我假设页面上还有其他链接

function preProcess(data) {
    ...
    row.cell[0] = '<a href="#" class="clickMe" id="E' + i + '">' + row.cell[0] + '</a>';
}

jQuery("a.clickMe").live("click", function(event) {
    event.preventDefault();
    window.open('doc.php?q=' + this.id, 'D' + this.id, .....
});
免责声明：我从未使用过FlexGrid，但从您的其他评论来看，您似乎可以在FlexGrid将其放入DOM之前修改内容

在将元素添加到DOM之前，live事件允许挂接单个匿名或非匿名处理程序

见：

.活

将处理程序附加到事件 对于与 当前选择器，现在和在 未来

出于好奇，为什么“所有函数……都是匿名函数”？没有批评的意图，我只是，真诚地，好奇。我想强迫自己学习和掌握每一个概念。所有函数都应该是匿名函数。我采取类似的策略-所有锤子都应该是蓝色的。不要建议我使用红色锤子。如果你想学习和掌握每一个概念，请从使用正确的工具开始：jQuery并不要求匿名函数的使用，当然也不是唯一的。如果您想使用，可能会遇到麻烦。解除绑定。对我来说，独家使用匿名函数听起来像是等待发生的内存泄漏。出于好奇，为什么“所有函数……都是匿名函数”？没有批评的意图，我只是，真诚地，好奇。我想强迫自己学习和掌握每一个概念。所有函数都应该是匿名函数。我采取类似的策略-所有锤子都应该是蓝色的。不要建议我使用红色锤子。如果你想学习和掌握每一个概念，请从使用正确的工具开始：jQuery并不要求匿名函数的使用，当然也不是唯一的。如果您想使用，可能会遇到麻烦。解除绑定。对匿名函数的独占使用听起来像是等待发生的内存泄漏。Flexigrid稍后会将超链接分配到表单元格中。@Eduardo关键在这里-稍后。如中所示，在您调用$.click之后？噢！对之后。Flexigrid将稍后将超链接分配到表格单元格中。@Eduardo这是键-稍后。如中所示，在您调用$.click之后？噢！对正如我告诉Rex M的那样，FlexGrid稍后将创建元素。但是，正如Rex M告诉我的那样，jQuery选择器只处理已经创建的元素。正如我告诉Rex M的那样，FlexGrid稍后将创建该元素。但是，正如Rex M告诉我的那样，jQuery选择器只对已经创建的元素起作用。您应该注意到，通过id为每个元素创建实时事件根本不是最优的。您应该注意到，通过id为每个元素创建实时事件根本不是最优的。