jQuery event not firing_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-08 23:44 出处：网络

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:

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.
   开发者_StackOverflow社区     </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...

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.....!");    
    });
});

I want to mention (because I found no mention of it in any of the "event not firing" cases I scoured the web for) that there is a possibility which might bite you.

If you happen to use .remove() to extract something temporarily from the DOM and then reinsert it, then you will lose your events. What you need to use instead is .detach() to preserve the data and events after reinsertion. This can be hard to debug as everything may look normal, and the event debugging tools are sketchy at best.

(Personally I would call them something more like .detachAndScrubDataAndEvents() and .detach(), as I'm a fan of descriptive names saving hours of debugging. For those who find .remove() and .detach() to be semantically and meaningfully distinguished names... peace be with you... BUT you're flat out wrong.)