Question

I have a dynamically created table which in the last <td> there is a hidden <div> which is shown when the user hovers over a link in the <td>. That all works fine but there are several links in the div that I want to fire a function based on the id of the link concat’d with an string captured from a <td> from the parent row. I can capture the the variables I need from the id and <td> but something is wrong with the click function I have created.

I monitored the function in FireBug and the function appears to be firing on all of the links instead of the one that is clicked. Here is my working code:

function fixLink() {
           $('a.batchMatchLink').click(
             function() {
                 var r = $(this).parent().parent().parent().parent().parent();
                 var x = $(this).attr("id");
                 var a = $(r).find('td:nth-child(6)').text();
                 var st = x + "." + a;
                 fireLink(st);
             }
            );
       }

       function fireLink(st) {
           $.ajax({
               type: "POST",
               url: "AjaxWcf.svc/MatchBatch",
               contentType: "application/json; charset=utf-8",
               data: st,
               dataType: "json",
               success: function(msg) {
                   alert("Entry has been updated");
                   },
               error: AjaxFailed

           });

Why are all of the links firing?

Thanks!!!

Answer 1

Maybe you only need to cancel the click event :

function(evt) {
    evt.preventDefault();
    var r = $(this).parent().parent().parent().parent().parent();
    var x = $(this).attr("id");
    var a = $(r).find('td:nth-child(6)').text();
    var st = x + "." + a;
    fireLink(st);
}