-1

How can i access html tag that exist inside jquery function check below code , i want to access the [ a link] tag to do another task when user click on it 

  $.ajax({
                type:"POST",
                url: "WebForm1.aspx/GetProblems",
                data: "{}",
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    //Function to cut a string that contain data in format : "problem-id"
                    for (var i = 0; i < data.d.length; i++) {
                        var x = data.d[i].search('-');
                        var problem = data.d[i].slice(0, x);
                        var id = data.d[i].substr(x+1, 1);
                        $("#div2").append("<a class='menu' href='webform1.aspx?id="+id+"'>" + problem + "</a> &nbsp;&nbsp;&nbsp;&nbsp;");
                    }
                },
                failure: function (response) {
                    alert("fail");
                }
           });

i try to do the following but nothing happened . 

           $("a").click(function (event) {
               event.preventDefault();
               alert($(this).attr('href').charAt(13));
}

also try with class name , still the same problem nothing happened . 

$(".menu").click(function (event) {
               event.preventDefault();
               alert($(this).attr('href').charAt(13));
}
Bassem
  • 103
  • 2
  • 15
  • did you try `$("#div2").on('click', 'a.menu', function(){});` – worldask Sep 27 '14 at 10:12
  • possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – T J Sep 27 '14 at 10:39

4 Answers4

0

Since you are generating html dynamically try event delegation as shown :

$(document).on('click','a.menu',function(event) {
     event.preventDefault();
     alert($(this).attr('href').charAt(13));
});

OR

$('#div2').on('click','a.menu',function(event) {
     event.preventDefault();
     alert($(this).attr('href').charAt(13));
});

OR

$('#div2').on('click','a',function(event) {
     event.preventDefault();
     alert($(this).attr('href').charAt(13));
});
Kartikeya Khosla
  • 18,743
  • 8
  • 43
  • 69
0

you can try the following:

$(document).on('click','.menu',function(){
    //your task here
});
Amin Jafari
  • 7,157
  • 2
  • 18
  • 43
0

Either use event-delegation as proposed by other users or do it manually as follows (which is more efficient too):

$("<a class='menu' href='webform1.aspx?id="+id+"'>" + problem + "</a> &nbsp;&nbsp;&nbsp;&nbsp;").appendTo('#div2').click(function() {
    // Do what you wanna do
});
Storrm
  • 102
  • 1
  • 7
-1

You can access html element which is created by jquery.

Update:

Suppose Your HTML is: <div class="div1"></div>

And your jquery is like:

$('.div1').append('<a href=# class="menu">Link</a>');
$(".menu").click(function(){
 alert("Task goes here");   
});

It will work fine.

Here is the Demo.

Sarju
  • 173
  • 2
  • 9