jQuery事件未触发

小编典典

jQuery事件未触发

json

我有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”），该消息没有出现，并且萤火虫中没有错误…

有人可以向我解释为什么…吗？谢谢…

阅读 430

2020-07-27

共1个答案

小编典典

click()将仅绑定，当时存在于页面元素事件click被调用（这同样适用on()，而不选择器，bind()和快捷组用于结合在所有其他方法;
keydown()，change()等）。

由于 一段时间后 您的其他元素是通过AJAX添加的，因此该处理程序不受此约束。

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

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

由于on()是在jQuery
1.7中引入的，因此，如果您使用的是jQuery的早期版本（如询问此问题时已存在的版本），则可以使用live()或delegate()代替on；

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

2020-07-27