Question

我有3个文件：

js_json.js - ＆gt;为我的json代码
javascript.js - ＆gt;对于我的JavaScript 功能
的index.php

此处为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;
    });
});

这里是我的javascript.js代码：

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

这里是index.php代码：

    //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>

我的问题是：

当我点击“Hola Test 1”链接时，它会起作用并显示消息。问题是，在我单击选择选项后，出现链接“Hola Test”，然后我点击（“Hola Test”）链接，消息没有出现，并且firebug中没有错误...

有人可以向我解释为什么......？感谢的......

Answer 1

click()只会绑定调用click时页面中存在的元素的事件（对于没有选择器on()的{{1}}也是如此，以及用于绑定的快捷方式组中的所有其他方法; bind()，keydown()等。）

因为你的其他元素后来通过AJAX 添加，所以处理程序没有绑定它。

使用.on()代替选择器，它会将事件绑定到选择器匹配的所有当前和未来元素。

change()

由于jQuery 1.7中引入了$(function (){ $(document).on('click', 'a[name=pesan]', function () { alert("holalalalalal.....!"); }); });，如果你使用的是早期版本的jQuery（就像问过这个问题时那样），你可以使用live()或delegate()而不是;

on()

Answer 2

我想提及（因为我没有在任何＆＃34;事件没有解雇＆＃34;我搜索网络的情况下没有提到它）有可能可能咬你。

如果您碰巧使用 .remove() 从DOM中暂时提取内容然后重新插入，那么您将丢失事件。您需要使用 .detach() 来重新插入后保留数据和事件。这可能很难调试，因为一切看起来都很正常，而且事件调试工具最多也是粗略的。

（就我个人而言，我会称之为 .detachAndScrubDataAndEvents（）和 .detach（），因为我喜欢描述性名称保存几个小时的调试。对于那些发现 .remove（）和 .detach（）的人来说，是一个语义和有意义的尊贵名字......和平与你同在......但是你和＃39;严重错误。）

jQuery事件没有触发

2 个答案: