Question

从根本上说，当我点击某个按钮时，它会使用 Jquery 在特定的{。{1}} end之前附加特定的div。生成或附加div后，有一些功能可以使div div可拖动并更改其部分外观。守则：

HTML

jquery-ui

JS ：

    <button class="chat_test_start_button" onclick="chat_generate(/'1/')">Button</button>
<div class="end"></div>

可拖动功能：

   $( document ).ready(function() {
startf();
});
function startf(){
  chat_enlarge_standard_general();
}

function chat_generate(chat_id) {
var open = "<p style='background:red;'>Hello</p>";

var open = [
  "<div class='full_wrap' id='chat_1'>   <div class='force-overflow'></div>    <div id='nav_1' class='side'>      <h2>Chat Settings & Info</h2>  <a id='closebtn' href='javascript:void(0)'",
  "class='closebtn' onclick='closeNav(1)'>&times;</a>       <div class='authr'>     <a>    <div class='authr_img'></div>       </a>    <form action='mypage.php' method='post'>    <div ",
  "class='authr_name'><button value=' $chat_authr' name='userlink' class='subm_as_text'> $chat_authr</button></div>    </form>      </div>    <div class='chat_info'>    <div ",
  "class='chat_descy'>    <h2>Chat Description</h2>    <div class='descc'>    <h3> $chat_description</h3>    </div>    </div>    <div class='chat_fol'><h2>Chat users:  $num_users</h2></div>    <div class='chat_back'>    <h2> ",
  "Change Chat Wallpaper</h2>    <form method='post' action='picture.php' enctype='multipart/form-data'>    <input type='file' id='upload' class='custom-file-input' name='chat_wall'>    <input type='submit' ",
"class='chat_wall_subm' value='Change'/>    </form>    </div>    </div>    <form method='post' action='chat.php' >    <button class='chat_leave' name='chat_leave' value='$chat_index' >Leave Chat</button>    </form>    </div>    <div class='mnav'>    ",
"<span onclick='openNav('1')'>&#9776;</span>    <i class='material-icons' id='chat_un_small' onclick='chat_un_small('1')'>arrow_upward</i>    <h1>$chat_title</h1>    <div class='chat_close'><i ",
"class='material-icons'>&#xE5CD;</i></div>    </div>    <div class='conceal_wrapper'>    <div class='msgs' id='1'>    </div>    <form method='post' id='form_1' class='comform'>    <div class='wcom' >    <input maxlength='140' type = 'text' id='1'  class='comin' placeholder='My message...' name='sendmsg' ",
"autocapitalize='off' autocorrect='off'  />    <input class='hidden_index' type='text' value='1' name='chat_index'/>    </div>    </form>    </div>    <div class='chat_enlarge'>    <div class='chat_enlarge_full' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' ",
"onclick='chat_enlarge_full(1)'></div>    <div class='chat_enlarge_standard'  onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_standard(1)'></div>    <div ",
"class='chat_enlarge_small'  onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_small(1)'></div>    </div></div>"
].join("\n");
draggables();
chat_enlarge_standard_general();
startf();
     $(open).insertBefore(".end");
}

function chat_enlarge_standard_general(){
      $(".full_wrap").css({"width":"25%","height":"75.6%","right":"auto"});
      $(".msgs").css("width","25%");
      $(".comstandin").css("margin-top","13%");
      $(".wcom").css("width","25%");
      $(".side").css("width","100%");
      $(".chat_leave").css("width","70%");
      $(".chat_leave").css("margin-left","15%");
      $(".mnav span").css("padding","0");
      $(".side a:nth-child(2)").css({"padding":"15px"});
      $(".mnav").css("height","10%");
      $(".mnav h1").css("padding","5% 0px 5% 5%");

          $(".mnav span").css({
                "padding": "5%",
                    "padding-left": "0",
                    "padding-top":"3%",
                    "width":"5%"
              });
      $(".side").css({"width":"100%","height":"90%"});

      $(".mnav h1").css("width","75%");

}

所以每当我在function draggables(){ alert("drag"); $(".full_wrap").draggable({ axis: "x", containment: "window" }); } .end之前插入特定的div时，我通过调用一般函数和可拖动函数来调用它会起作用，但它没有。但每当我按下附加div上的按钮时，聊天div会更改，因为它会使用特定ID调用此函数：

div

非常感谢任何建议或答案。谢谢你的时间。

当div作为html附加时，js函数不起作用

0 个答案: