Home/ Questions/Q 5963579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T19:16:40+00:00

I have 3 files: js_json.js -> for my json code javascript.js -> for my

  • 0

I have 3 files:

  • js_json.js -> for my json code
  • javascript.js -> for my javascript
    function
  • index.php

Here the code for js_json.js:

$(function(){
    $('#postTitle').change(function(){

        var title_id = $("#postTitle").val();


        $.ajax({
            type:"post",
            url:"proses.php",
            data:"title_id=" + title_id,
            dataType:"json",
            success:function(data){
                body="";
                //$.each(data, function(i,n){
                    //body = n['body'];    
                //});
                body += "<a href=\"javascript:void(0);\" id=\"pesan\" name="pesan" onClick=\"\">Hola Test</a>";
                $(".postBody").empty();
                $(".postBody").append(body);
            },
            error:function(data){
                $(".postBody").empty();
                $(".postBody").append("NO Post Selected.");
            }

        });
        return false;
    });
});

and here my javascript.js code:

$(function (){
    $("a[name=pesan]").click(function (){
        alert("holalalalalal.....!");    
    });
});

and here the index.php code:

    //some code
    <body>
        <a href="javascript:void(0);" id="pesan" name="pesan">Hola Test 1</a>
        Posts : <br />
        <select name="title" id="postTitle">
            <option value="">Select Post...</option>
            <?php
                $sql = "SELECT id, title FROM posts ORDER BY title";
                $query = mysql_query($sql) or die(mysql_error());

                while($rows = mysql_fetch_array($query)){
                    print('<option value="' . $rows['id'] . '">' . $rows['title'] . '</option>');
                }
            ?>
        </select>
        <br />
        Body : <br />
        <div class="postBody">
            Will show the body of post.
        </div>
    </body>
</html>

and my question is:

When I click the link “Hola Test 1”, it works and the message appears. The problem is, after I click the select option, and the link “Hola Test” appears, and then I click that (“Hola Test”) link, the message does not appear and there are no errors in firebug…

Can somebody explain to me why…? Thank’s…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    click() will only bind the event for elements that exist in the page at the time click is called (the same goes for on() without a selector, bind(), and all the other methods in the shortcut-group for bind; keydown(), change() etc. ).

    Because your other element is getting added via AJAX some time later, the handler isn’t bound for it.

    Use .on() with a selector instead, which will bind the event to all current and future elements matched by the selector.

    $(function (){
    $(document).on('click', 'a[name=pesan]', function () {
        alert("holalalalalal.....!");    
    });
});

    Since on() was introduced in jQuery 1.7, if you’re using earlier versions of jQuery (like those that existed when this question was asked), you can use live() or delegate() instead of on;

    $(function (){
    $('a[name=pesan]').live('click', function () {
        alert("holalalalalal.....!");    
    });
});
    • 0