首页 文章

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

提问于
浏览 次
0

我有一个加载了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>";
            }
}

?>
php jquery html ajax

3 回答

  • 1

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

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

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

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

    回复于
  • 1

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

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

    Syntax:

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

    这叫做EventDelegation！

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

    回复于
  • 1

    尝试：

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

相关问题