jQuery事件未触发

Question

jQuery事件未触发

9

我有3个文件：

js_json.js -> 用于我的json代码
javascript.js -> 用于我的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中没有错误...

有人能解释一下为什么吗？谢谢...

- Sindhu13

使用.live()，就像@Matt所回答的那样。但请记住，在页面中多次使用相同的id是无效的（ids是唯一的），并且很可能会在将来引起其他问题。 - Gabriele Petrioli

2个回答

2

我想提一下 （因为我在搜索所有“事件未触发”的案例时都没有找到提及它的信息） 可能会让你遇到问题。

如果你偶然使用了.remove() 来暂时从 DOM 中提取某些内容，然后重新插入，那么你将失去事件绑定。相反，你需要使用.detach() 来保留数据和事件绑定，以便重新插入后可以正常工作。这可能很难调试，因为一切看起来都很正常，而事件调试工具最多也只是粗略的。

（个人而言，我会将它们命名为类似.detachAndScrubDataAndEvents()和.detach()的名称，因为我喜欢有描述性的名称来节省调试时间。对于那些发现.remove()和.detach()不是语义上和含义上区分明确的名称的人，祝你好运，但你肯定是错的。）

- HostileFork says dont trust SE

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt · Accepted Answer

click() 只会为在调用 click 时已经存在于页面中的元素绑定事件（对于没有选择器的 on()，bind() 和所有其他与 bind 快捷组相关的方法也是如此；例如：keydown()，change() 等）。

由于你的另一个元素是稍后通过 AJAX 添加的，因此处理程序未为其绑定。

改用带有选择器的 .on()，它将为选择器匹配的所有当前和未来的元素绑定事件。

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

自从jQuery 1.7引入了on()方法，如果你使用早期版本的jQuery（例如在这个问题被提出时存在的版本），你可以使用live()或delegate()代替on()。

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