Click function needed on Hyperlink column on dynamic Table

Question

I have Dynamic Table .Its 3rd column display Hyperlink records..On Click of Hyperlink ..It should redirect to new Window

this is my function :

function getErrorStatusList() {
    var serve = JSON.stringify({ program: $("#proselct option:selected").text() });
    $.ajax({
        type: "POST",
        url: "UFZillaErrorStatus.aspx/GetErrorStatusList",
        data: serve,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            $("#result").empty();
            obj = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
            var output = "<table id='tblResult'><tr><th>Serial No.</th><th>UFZillaID</th><th>MZillaID</th><th>Status</th></tr>";

            for (var x = 0; x < obj.length; x++) {
                output += "<tr><td>" + (x + 1) + "</td><td>" + obj[x].IssueID + "</td><td>" + obj[x].EMID + "</td><td>" + obj[x].EMStatus + "</td></tr>";
            }
            output += "</table>";
            $("#result").append(output);

        },
        error: function () { alert("Server Error!!"); }

    });

How to create function to click on HyperLink data ..I tried yo give id to element ("EMID") and create function like this ;

$("#EMID").click(function () {

    });

But this doesnot hit ....

Any Suggestion would be Helpful

Use event delegation http://stackoverflow.com/q/1359018/3639582 — Shaunak D, Jun 17 '14 at 10:49
I have edited your title. Please do not include information about a language used in a question title unless it wouldn't make sense without it. Tags serve this purpose. Also see, ["Should questions include “tags” in their titles?"](http://meta.stackoverflow.com/q/19190/193440), where the consensus is "no, they should not — chridam, Jun 17 '14 at 10:59

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

Using IDs in case of dynamic elements can create duplicated elements.

Try this,

$(document).on('click','td:eq(2) a',function(event){
    event.preventDefault();
    //your function goes here.
})

For the third column - Use td:eq( 2 ). And add a to it for hyperlinks.
For dynamically added elements, you need to use Event Delegation - .on()

edited May 23 '17 at 12:21

Community

1
1

answered Jun 17 '14 at 10:57

Shaunak D

20,588
10
46
79

score 0 · Answer 2 · answered Jun 17 '14 at 11:00

0

You can try this

 <script type="text/javascript">
jQuery(document).ready(function() {
      jQuery("#EMID").click(function () {

        //your function.

        return false;
      });
      jQuery("#EMID").trigger("click");
});
</script>

answered Jun 17 '14 at 11:00

user3590834

28
4

Litash · Answer 3 · 2014-06-17T14:22:57.000

1.if your 'EMID' is always a hyperlink, change your for loop to this:

for (var x = 0; x < obj.length; x++) {
    output += '<tr><td>' + (x + 1) + '</td><td>' + obj[x].IssueID + '</td><td><a class="fun-link" href="#">' + obj[x].EMID + '</a></td><td>' + obj[x].EMStatus + '</td></tr>';
}

see the difference?

2.then you can add following code in your <head>

$(document).on('click', '.fun-link', function(event) {
    event.preventDefault();
/* Act on the event */
});

Click function needed on Hyperlink column on dynamic Table

3 Answers3