Assign JavaScript to element from ajax query

Question

I have a simple code like:

<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<body>
<a href="#" class="plink">Click me</a>

<div class="cnt">

</div>
<script>
$(document).ready(function(){
   $(".plink").click(function(){
     alert("A");
   });

$.ajax({
            url: 'do.php?a=getinfo',                        
            type: 'POST',
            success: function(result) {
                $(".cnt").html(result);
            }
});
});
</script>
</body>
</html>

From ajax query I get this:

<a href="#" class="plink">Click me 2</a>

The problem is that when I click on a link (Click me 2) that I get from ajax query, assigned for this link event doesn't work, i.e. alert("A") doesn't show. So, is there any way to solve this problem?

and [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/q/12829963/218196) — Felix Kling, Feb 15 '14 at 20:49
Since the answers fail to get the point across (IMO): Have a look at [event delegation](http://learn.jquery.com/events/event-delegation/). — Felix Kling, Feb 15 '14 at 20:52

score 0 · Accepted Answer · answered Feb 15 '14 at 20:48

0

.click()is not bindable with dynamic elements. Try this,

$("body").on("click",".plink",function(e){
     alert("A");
});

else

$(".plink").live(function(e){
         alert("A");
});

answered Feb 15 '14 at 20:48

Subash Selvaraj

3,385
1
14
17

1

.live() is deprecated in newest versions of jQuery. See the docs https://api.jquery.com/live/ – melvas Feb 15 '14 at 20:53
@Evgeny: Make sure you understand *why*. Have a look at this more elaborated answer: http://stackoverflow.com/a/12830031/218196 and follow the links. – Felix Kling Feb 15 '14 at 20:55

score 0 · Answer 2 · answered Feb 15 '14 at 20:50

0

New element from your ajax result has no binded click action. Try to use this:

$(document).on('click', '.plink', function(){ alert("A"); });

instead of:

$(".plink").click(function(){ alert("A"); });

answered Feb 15 '14 at 20:50

melvas

2,346
25
29

Why should the OP try that? Please **explain** your solution. – Felix Kling Feb 15 '14 at 20:51
I edited my answer with explanation above a few minutes ago. Sorry – melvas Feb 15 '14 at 20:55

Assign JavaScript to element from ajax query

2 Answers2