haga clic en evento no invocar evento después de cargar `<a href="#"> btn </a>` con `ajax`

Tengo una página cargada con ajax completa, Tengo botones en la página (cargar con ajax), así que quiero luego de hacer clic en el botón ejecutar un evento de alerta, Intento bind , delegar , live , on Evento para adjuntar el evento al manejador pero sin resultado. Trataré de agregar la prueba btn manualmente y eso llama al evento, pero los botones que se cargan a través de ajax no llaman a Evento. Mi código html:

<body>
test btn
<div class="header"></div>
<div class="wrap">
<div class="rightmenu"></div>
<div class="content">
</div>
</div>
</body>

mi código 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.'" );
        })

    });

y el código 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'>
                   avatar
                </div>
                <div class='music-post'>
                    

$music_name

                    
$music_composer "; $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'>

$username :

                        $comments[comment];
                        </div>
                        ";
                    }
                    echo "


                    insert comment";
            }
}

?>
0
mi versión es jquery-1.10.2.min.js
agregado el autor Radian, fuente
¿Qué versión de jQuery estás usando? ¿Intentó $ (document) .on ("click", ". Insert_cm", func ...
agregado el autor PSL, fuente

3 Respuestas

Use .on() with updated syntax in the jQuery version > 1.8:

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

Sintaxis:

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

Eso se llama EventDelegation !

Donde .content se refiere al elemento primario más cercano, también puede usar document , document.body .

0
agregado

Tratar:

$(document).on("click",".insert_cm",function() {
    alert("User clicked on 'foo.'");
    return false;
});
0
agregado
gracias, pero no funciona,
agregado el autor Radian, fuente
@Radian He actualizado la respuesta. Espero eso ayude
agregado el autor Hiral, fuente

siempre use $ (document) .on() para el elemento creado dinámicamente si desea vincular un evento a ellos.

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

la carpeta de eventos debe situarse a nivel de documento para que se reconozca cada vez que se agreguen más elementos a DOM

more info on $(document).on() : Is it possible to capture keydown globally on dynamically added text inputs?

0
agregado
¡Bravo! gracias patel, tu código resolvió mi problema
agregado el autor Radian, fuente
PHP - Comunidad española
PHP - Comunidad española
6 de los participantes

En este grupo hablamos de PHP. Partner: es.switch-case.com

JavaScript - Comunidad española
JavaScript - Comunidad española
4 de los participantes

En este grupo hablamos de JavaScript. Partner: es.switch-case.com