CODEWITHSUNDEEP
javascriptjqueryajax
Devilix
Devilix

Reputation: 323

Jquery Ajax php - .one function not work properly

This is a simple test page. The issue is that for the first click on the anchor tag, i get back the value, but when i click it for the second time seems that ajax stop to work. Please, tell me how can i solve it. Thanks!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>

</style>
</head>
<body>
<script>
$(document).ready(function() {
    $("a").one('click', function(e) {
        $.ajax({
        type: 'GET',
        data: { 
        play: $(this).attr("href") },
        success: function(msg) {
            //alert(msg);
            $("#playarea").append(msg);
          }
        });
    e.preventDefault();
    });
});
</script>

<div><a id="run1" href="link1">Test1...</a></div>
<div><a id="run1" href="link2">Test2...</a></div>
<div><a id="run1" href="link3">Test3...</a></div>
<div><a id="run1" href="link4">Test4...</a></div>
<div><a id="run1" href="link5">Test5...</a></div>

<div id="playarea"></div>

</body>
</html>

Upvotes: 0

Views: 52

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You should use on() instead of .one() since the one() will attach the click event just for one click then detach it.

.one() Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

$("a").on('click', function(e) {
    $.ajax({
    type: 'GET',
    data: { 
    play: $(this).attr("href") },
    success: function(msg) {
        //alert(msg);
        $("#playarea").html(msg);
      }
    });
    e.preventDefault();
});

NOTE : If you want to override the old result use html() instead of append(). Hope this helps.

Upvotes: 1

Related Questions