How to create an hyperlink whose onclick handler is an anonymous function?

Question

I am trying to generate dynamically the onclick event handlers of the cells of a flexigrid-generated table:

// ...
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;
}
// ...

However, when I click on the generated hyperlinks, they don't work. What's the problem? My use of closures? The <a> tag doesn't accept the onclick attribute?

---

NOTE: Since I began using jQuery, my policy is all functions shall be anonymous functions. Please don't suggest me using an ordinary function.

Answer 1

Sounds like what you're looking for is live():

Attach a handler to the event for all elements which match the current selector, now and in the future

In effect, it allows you to create event handlers for elements that do not exist yet. I get the feeling you only want to make minimal changes to your current code in order to make this work. In that case, live() is your best option since your code would only change from

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

to

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

Answer 2

Create the element using jQuery (or the browser's native dom functions) and attach an event handler:

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

Answer 3

It looks like you're creating the <a> using raw string concatenation, and then assigning it... where? If the link isn't part of the DOM, then $('linkID') won't find anything, effectively assigning your click handler to nothing. jQuery selectors only search the DOM.

Answer 4

Firstly, it doesn't look like you're appending your with id='#E' + i.

So, I'd guess that when you call $('#E' + i), it's returning an empty jQuery object. You can check for this by alerting $('#E' + i).length. 0 means nothing was found.

Second, you don't need to the javascript:void(0) call. Just replace it with '#' and call event.preventDefault() in your anonymous function. You'll need to pass event as a parameter to the anonymous function, as well.

Answer 5

You are trying to hook up the onclick event on an element that doesn't exist yet. At the time, the element only exist as text in the array, as the code hasn't been added to the DOM, the selector can't find it.

If you want to use an anonymous function for the event handler, you have to wait to hook up the event until the element has been created so that it exists as an object.

Answer 6

Use jQuery's live event.

For ease of seeing what's going on, I'm also adding a class to the link because I'm assuming that there's other links on the page, .

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

Disclaimer: I've never used flexigrid, but from your other comments, it appears you are able to modify the content before flexigrid puts it in the DOM.

The live event lets up hook up a single handler (anonymous or not) before the element is added to the DOM.

See: jQuery live()

.live()

Attach a handler to the event for all elements which match the current selector, now and in the future

Answer 7

I copied your code and, after a few minor corrections, I made it work. I assumed that data was referring to a table object. Here's my code together with dummy 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>

My corrections were the following (I think some might be due to transcription when you were copying the code for the post):

1. I replaced cell with cells
2. I added innerHTML after the cell index
3. I set the link to javascript:void instead of javascript.void
4. I commented out the line $('#' + id).click().id = row.cells[4];, because I had no idea what it did.

With those changes it worked like a charm.

I hope this helps.