javascript - $ ('#notificationClick' ).click 不起作用

Question

所以我试图让这个工作在这里是jquery+php。

当我尝试在 jquery 中触发点击时，它甚至不执行“alert()”。

PHP(更新):

$MSG_Notification_sql = mysqli_query($Connection, "SELECT * FROM notifications WHERE user_id='".$bzInfo['id']."'");

while ($MSG_Notification_row = mysqli_fetch_array($MSG_Notification_sql)){        

    $MSG_Notification_rows[] = $MSG_Notification_row;        

}

foreach ($MSG_Notification_rows as $MSG_Notification_row){                

    $bzWhen = date('d-m-Y H:m:i', strtotime($MSG_Notification_row['when']));


    echo '<form method="POST">
            <div class="notificationClick notification-messages info">
                <div class="user-profile"> 
                    <img src="assets/img/profiles/d.jpg"  alt="" data-src="assets/img/profiles/d.jpg" data-src-retina="assets/img/profiles/d2x.jpg" width="35" height="35">
                </div>
                <div class="message-wrapper">
                  <div class="heading"> '.$MSG_Notification_row['title'].'</div>
                  <div class="description"> '.$MSG_Notification_row['description'].' </div>
                  <div class="date pull-left"> '.$bzWhen.'</div>
                </div>                               
                <input name="notificationID" value="'.$MSG_Notification_row['id'].'" style="display: none" />                
                <div class="clearfix"></div>
            </div>
        </form>';

}

Javascript(更新):

$(document).ready(function(){
    $('.notificationClick').click(function(event){                 

                alert('Ok');

        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = $('#notificationClick').serialize();

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : '../../class/notifications/msgs_del.php', // the url where we want to POST
            data        : formData, // our data object                         
            dataType    : 'json' // what type of data do we expect back from the server

        })
            // using the done promise callback
            .done(function(data) {
                // log data to the console so we can see
                console.log(data); 

                window.location = '/?page=messages&sub=inbox&bx=preview&id='+ data.notificationID +'';

            });                                                

            event.preventDefault();
    });
});

有人可以帮我吗？我正在尝试完成此任务，但一无所获:(

Answer 1

首先，正如其他人所说，id 必须是单数。因此，请使用您已有的类(class)。现在在里面，您需要使用您单击的当前表单，而不是所有表单。

$('.notification-messages').click(function(event){      //<-- change to class           
    var formData = $(this).closest("form").serialize();  //change to this
    ...

如果您要动态加载这些内容，则需要使用事件委托(delegate)

$(document).on("click", '.notification-messages', function(event){       
    var formData = $(this).closest("form").serialize();
    ...