如何创建一个onclick处理程序是匿名函数的超链接?

时间:2011-01-27 00:03:12

标签: javascript jquery html closures flexigrid

我正在尝试动态生成flexigrid生成表格的单元格的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;
}
// ...

但是,当我点击生成的超链接时,它们不起作用。有什么问题?我使用封口? <a>代码不接受onclick属性?


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

7 个答案:

答案 0 :(得分:2)

使用jQuery(或浏览器的本机dom函数)创建元素并附加事件处理程序:

$('<a href="#" id="E' + i + '"/>').html(row.cell[0]).click(function(e) {
    e.preventDefault();
    // your code
});

答案 1 :(得分:2)

听起来像你正在寻找的是 live()

  

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

实际上,它允许您为尚不存在的元素创建事件处理程序。 我觉得您只想对当前代码进行微小的更改才能使其工作。在这种情况下,live()是您的最佳选择,因为您的代码只会从

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

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

答案 2 :(得分:1)

看起来你正在使用原始字符串连接创建<a>,然后分配它......在哪里?如果链接不是DOM的一部分,那么$('linkID')将找不到任何内容,有效地将您的点击处理程序分配给任何内容。 jQuery选择器只搜索DOM。

答案 3 :(得分:1)

首先,看起来你并没有附上id ='#E'+ i。

所以,我猜想当你调用$('#E'+ i)时,它会返回一个空的jQuery对象。您可以通过提醒$('#E'+ i).length来检查这一点。 0表示没有找到任何内容。

其次,你不需要javascript:void(0)调用。只需将其替换为'#'并在匿名函数中调用event.preventDefault()。您还需要将事件作为参数传递给匿名函数。

答案 4 :(得分:1)

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

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

答案 5 :(得分:1)

使用jQuery的live事件。

为了便于查看正在发生的事情,我还在链接中添加了一个类,因为我假设页面上还有其他链接,。

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, .....
});

免责声明:我从未使用过flexigrid,但是从您的其他评论中可以看出,您可以在flexigrid将其放入DOM之前修改内容。

在将元素添加到DOM之前,live事件允许挂钩单个处理程序(匿名或非匿名)。

请参阅:jQuery live()

  

.live()

     

将事件处理程序附加到事件中   对于所有匹配的元素   当前选择器,现在和在   将来

答案 6 :(得分:0)

我复制了你的代码,经过一些小的修正,我就把它弄好了。我假设数据是指一个表对象。这是我的代码和虚拟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>

我的更正如下(我认为有些可能是因为你在复制帖子代码时的转录):

  1. 我用细胞替换细胞
  2. 我在单元格索引
  3. 之后添加了innerHTML
  4. 我将链接设置为javascript:void而不是javascript.void
  5. 我评论了$('#' + id).click().id = row.cells[4];行,因为我不知道它做了什么。
  6. 通过这些改变,它就像一个魅力。

    我希望这会有所帮助。