Question

我遇到了jQuery代码的问题。问题是我正在设计一个聊天应用程序。用户列表将通过ajax从后端获取，需要在前端显示。我调用了ajax我得到的数据我能够显示数据。我在这里创建一个元素如下：

function display_users_list(html) {
    var users_list = JSON.parse(html);
    var display_users = '';
    for (var key in users_list) {
        display_users += '<div class="user user-list" data-user-id='+users_list[key].userid+'>';
        display_users += users_list[key].username;
        display_users += '</div>';
    }
    $(".chat-body").html(display_users);
}

但问题是当我使用带有css类的jquery创建一个元素时，我无法在同一个jquery文件中调用该css类。我粘贴代码可能是你们都会理解我的问题。我打电话给css如下：

$(".chat-body > .user-list").each(function() {
    $(this).on("click", function() {
        var uId = $(this).data('user-id');
        var innerTxt = $(this).text();
        console.log("uid:"+uId+"innerTxt:"+innerTxt);
        //$(".chat-box").after(generate_msg_box(uId, innerTxt))
    });
});

整个代码如下： HTML代码：

<div class="chat-box">
    <div class="chat-head">Users List</div>
    <div class="chat-body">
        No User Found
    </div>
</div>

<div class="msg-box">
    <div class="msg-head">
        User 1
        <div class="close-msg">x</div>
    </div>
    <div class="msg-wrap">
        <div class="msg-body">
            <div class="sender-msg">This is sender message</div>
            <div class="recevier-msg">This is recevier message</div>
            <div class="sender-msg">This is sender message</div>
            <div class="recevier-msg">This is recevier message</div>
            <div class="sender-msg">This is sender message</div>
            <div class="recevier-msg">This is recevier message</div>
            <div class="recevier-msg">This is recevier message</div>
        </div>
        <div class="msg-footer">
            <textarea class="msg-input">Sample</textarea>
        </div>
    </div>
</div>

jquery代码：

$(document).ready(function() {
$(".msg-box").hide();
get_users_list();
$(".chat-head").click(function() {
    $(".chat-body").slideToggle("slow");
});

function get_users_list() {
    $.ajax({
        url: "phpActions/actions.php",
        method: "post",
        data: "actions=getData",
        success:function(html) {
            display_users_list(html);
        }
    });
}

function display_users_list(html) {
    var users_list = JSON.parse(html);
    var display_users = '';
    for (var key in users_list) {
        display_users += '<div class="user user-list" data-user-id='+users_list[key].userid+'>';
        display_users += users_list[key].username;
        display_users += '</div>';
    }
    $(".chat-body").html(display_users);
}

$(".chat-body > .user-list").each(function() {
    $(this).on("click", function() {
        var uId = $(this).data('user-id');
        var innerTxt = $(this).text();
        console.log("uid:"+uId+"innerTxt:"+innerTxt);
        //$(".chat-box").after(generate_msg_box(uId, innerTxt))
    });
});

}）;

Answer 1

由于您已经在使用jQuery.on()，因此您可以使用委托事件并摆脱事件绑定循环。使用委托事件确保您的事件甚至会在稍后添加的元素上触发，这是您的情况。

来自文档：

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。

$(".chat-body").on("click", ".user-list", function(event) {
  var $listElement = $(event.target);
  var uId = $listElement.data('user-id');
  var innerTxt = $listElement.text();
  console.log("uid:" + uId + "innerTxt:" + innerTxt);
});

Answer 2

似乎在元素在DOM之前绑定click函数，确保事件绑定代码在$（＆＃34; .chat-body＆＃34;）。html（display_users）;之后。

从您当前的代码中，始终是您的事件绑定调用在ajax调用返回数据之前执行尝试此

为事件绑定创建一个新函数说

 function bindClick(){
     $(".chat-body > .user-list").each(function() {
        $(this).on("click", function() {
         var uId = $(this).data('user-id');
         var innerTxt = $(this).text();
         console.log("uid:"+uId+"innerTxt:"+innerTxt);
        //$(".chat-box").after(generate_msg_box(uId, innerTxt))
     });
   });
 }

并在您的

之后致电

 $(".chat-body").html(display_users); 
 bindClick();

无法从通过jQuery创建的元素中调用jQuery中的css类

2 个答案: