click event rufe das Ereignis nach dem Laden nicht auf <a href="#"> btn </a> `mit` ajax`

Ich habe eine Seite, die komplett mit Ajax geladen ist, Ich habe Buttons auf der Seite (lade mit Ajax), damit ich nach dem Klick auf den Button ein Alertereignis ausführen möchte, Ich versuche bind , delegiere , live , auf Event, um das Ereignis an den Handler anzuhängen, aber kein Ergebnis. Ich versuche, test btn manuell hinzuzufügen und das Ereignis aufzurufen, aber die Schaltflächen, die über Ajax geladen werden, rufen Event nicht auf. Mein HTML-Code:

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

mein jQuery code:

$(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.'" );
        })

    });

und der PHP code:

<?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
Meine Version ist jquery-1.10.2.min.js
hinzugefügt der Autor Radian, Quelle
Welche Version von jQuery verwenden Sie? Haben Sie $ (document) .on ("click", ". Insert_cm", func ... ) versucht
hinzugefügt der Autor PSL, Quelle

3 Antworten

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

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

Syntax:

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

Das nennt man EventDelegation !

Wenn sich .content auf das nächste übergeordnete Element bezieht, können Sie auch document , document.body verwenden.

0
hinzugefügt

Versuchen:

$(document).on("click",".insert_cm",function() {
    alert("User clicked on 'foo.'");
    return false;
});
0
hinzugefügt
Danke, aber nicht funktioniert,
hinzugefügt der Autor Radian, Quelle
@Radian Ich habe die Antwort aktualisiert. ich hoffe es hilft
hinzugefügt der Autor Hiral, Quelle

Verwenden Sie immer $ (document) .on() für dynamisch erstellte Elemente, wenn Sie ein Ereignis an sie binden möchten.

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

Die Ereignismappe sollte sich auf Dokumentebene befinden, damit sie erkennt, wann immer mehr Elemente zum DOM hinzugefügt werden

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

0
hinzugefügt
Bravo! danke patel, dein Code hat mein Problem gelöst
hinzugefügt der Autor Radian, Quelle
PHP - Deutsche Gemeinschaft
PHP - Deutsche Gemeinschaft
5 der Teilnehmer

In dieser Gruppe sprechen wir über PHP. Partner: de.switch-case.com

JavaScript - Deutsche Gemeinschaft
JavaScript - Deutsche Gemeinschaft
3 der Teilnehmer

In dieser Gruppe sprechen wir über JavaScript.