Question

我正在为聊天框应用创建一些<div>元素。以下是HTML部分，其中单击按钮时会创建<div>元素。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../chat/style.css"/>
</head>
<body>
  <h1>Jquery div example</h1>
  <button><i>click to create div</i></button>
</body>
</html>

<div>元素的创建似乎没问题。但是我无法在创建的框中做任何事情。

这是用于创建div：

的JQuery代码

$(document).ready(function(){
    var chat_box_title = 'jaya chandra';
    $("button").click(function(){
        $('<div/>')
            .attr({id:'chat_box_'+chat_box_title})
            .addClass('chat_box')
            .html('<div class="chat_head">jaya chandra<span class="chat_close"><a class="chat_close" href="javascript:void(0)" onclick="javascript:closeChatBox(\''+chat_box_title+'\')">X</a></span></div><div class="chat_wrapper"><div class="chat_body"></div><div class="chat_footer"><textarea rows="4" placeholder="Your message here..." class="chat_input"></textarea></div></div>')
            .appendTo('body');      
    });    
});

点击课程.chat_head后，.chat_wrapper必须切换。我正在尝试使用以下代码绑定click函数..

$('body').on('click','div.chat_head>div.chat_wrapper',function(){
    //$('.chat_wrapper').slideToggle('slow');
    console.log('clicked');
});

我已经尝试了所有的想法，但我无法解决问题。

Answer 1

以下是您呈现的HTML： -

<div class="chat_head">jaya chandra
  <span class="chat_close">
  <a class="chat_close" href="javascript:void(0)" onclick="javascript:closeChatBox(\''+chat_box_title+'\')">X</a>
  </span>
</div>
<div class="chat_wrapper">
  <div class="chat_body"></div>
  <div class="chat_footer">
    <textarea rows="4" placeholder="Your message here..." class="chat_input"></textarea>
  </div>
</div>

因为div.chat_head和div.chat_wrapper是兄弟姐妹，并且您将所有内容放入div类chat_box，请尝试： -

$('body').on('click','div.chat_box>div.chat_wrapper',function(){

   console.log('clicked');

});

Answer 2

只需从此处删除>div.chat_wrapper。

$('body').on('click','div.chat_head',function(){
  $('.chat_wrapper').slideToggle('slow');
  console.log('clicked');
});

在这里工作JSFiddle https://jsfiddle.net/6wszffh8/

Answer 3

你的HTML错了。您的HTML标记之外有脚本标记吗？它应该在HEAD内或在你身体的底部。

<html>
<head>
<link rel="stylesheet" type="text/css" href="../chat/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">     </script>
</head>
<body>
<h1>Jquery div example</h1>
<button><i>click to create div</i></button>
</body>
</html>

使用您的点击装订，您将定位错误的元素。您的点击装订应该如下所示。

$(document).on('click', 'div.chat_wrapper', function(){
    // $('.chat_wrapper').slideToggle('slow');
    console.log('clicked');
});

JQuery事件绑定不适用于新创建的元素

3 个答案: