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

【问题标题】：click event not call event after load `<a href="#">btn</a>` with `ajax`使用 ajax 加载 `<a href="#">btn</a>` 后单击事件不调用事件
【发布时间】：2013-12-17 01:32:53
【问题描述】：

我有一个加载了完整的 ajax 的页面，我在页面上有按钮（使用 ajax 加载），所以我想在单击按钮后运行一个警报事件，我尝试bind,delegate,live,on 事件将事件附加到处理程序但没有结果。我正在尝试手动添加测试 btn 并调用事件，但通过 ajax 加载的按钮不调用事件。我的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>";
            }
}

?>

【问题讨论】：

您使用的是哪个版本的 jquery？你试过$( document ).on( "click",".insert_cm", func...
我的版本是jquery-1.10.2.min.js

标签： php jquery html ajax

【解决方案1】：

如果您想将事件绑定到动态创建的元素，请始终使用$(document).on()。

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

事件绑定器应该位于文档级别，以便当有更多元素添加到 DOM 时它可以识别

关于 $(document).on() 的更多信息：Is it possible to capture keydown globally on dynamically added text inputs?

【讨论】：

【解决方案2】：

在 jQuery 版本 > 1.8 中使用 .on() 和更新的语法：

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

语法：

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

那叫EventDelegation！

其中.content指的是最近的父元素，你也可以使用document，document.body。

【讨论】：

【解决方案3】：

试试：

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

【讨论】：