Question

我有一个加载了ajax的页面，我在页面上有按钮（用ajax加载），所以我想点击按钮后运行一个警报事件，我尝试bind，delegate，live，on事件将事件附加到处理程序但没有结果。我尝试手动添加测试btn并调用该事件，但通过ajax加载的按钮不会调用Event。我的HTML代码：

<body>
<a href='#' class='insert_cm'>test btn</a>
<div class="header"></div>
<div class="wrap">
<div class="rightmenu"></div>
<div class="content">
</div>
</div>
</body>

我的JQuery代码：

$(function(){
    $(".header").load("header.html");
    $(".rightmenu").load("sidebar.html");
    $.ajax({
        type:'POST',
        url:'timeline.php',
        success:function(data){
            $(".content").html(data);

            }
        });
            //insert comment after click the cm-btn
    $( ".insert_cm" ).live( "click", function() {
  alert( "User clicked on 'foo.'" );
        })

    });

和php代码：

<?php
include('db_inc.php');
include("myfunc.php");
$functionId=$_POST[functionId];
switch($functionId){
    case "":
    $music_query = $connection->query("SELECT * FROM music LIMIT 15") or die($connection->error);

            while($music = $music_query->fetch_array()){
                $music_id=$music['msuic_id'];
                $music_thumb =$music['music_thumb'];
                $music_name=$music['file_name'];
                echo "<div class='music-item'>
                <div class='music-avatar'>
                   <img src=admin/thumb/$music_thumb alt='avatar'>
                </div>
                <div class='music-post'>
                    <h3> $music_name <a href='#'  class='like_music' >لایک</a></h3>

                    <p> $music_composer </p>";
                    $comment_query=$connection->query("SELECT * FROM comments where f_music_id = '$music_id'") or die($connection->error);
                    while($comments = $comment_query->fetch_array()){
                        $username = get_username($comments['f_user_id']);
                        echo "
                        <div class='username_comment'>
                        <h4> $username <span>:</span></h4>
                        $comments[comment];
                        </div>
                        ";
                    }
                    echo "<textarea id='txt_cm' name='txt_cm'></textarea>
                    <a href='#' class='insert_cm'>insert comment</a>";
            }
}

?>

Answer 1

尝试：

$(document).on("click",".insert_cm",function() {
    alert("User clicked on 'foo.'");
    return false;
});

Answer 2

在jQuery版本中使用.on()更新语法＆gt; 1.8：

$(".content").on( "click",".insert_cm", function() {
  alert( "User clicked on 'foo.'" );
})

<强>语法：

$(selector/Closest parent).on(event,target,function(){});

这叫做 EventDelegation ！

.content引用最近的父元素，您也可以使用document，document.body。

Answer 3

如果要将事件绑定到动态创建的元素，

始终使用$(document).on()。

$(document).on("click", ".insert_cm", function() {
    alert( "User clicked on 'foo.'" );
    return false;
});

事件活页夹应位于文档级别，以便在DOM中添加更多元素时识别它

关于$（文件）.on（）的更多信息：Is it possible to capture keydown globally on dynamically added text inputs?

使用`ajax`加载`<a href="#">btn</a>`后，单击事件不调用事件

3 个答案: