Jquery 使用javascript移动按钮时出现问题_Jquery_Html

Jquery 使用javascript移动按钮时出现问题

jquery html

Jquery 使用javascript移动按钮时出现问题,jquery,html,Jquery,Html,您好，我有一个包含按钮的分区，我想在同一分区内的表中创建一个组，但当我尝试单击它们时，最后的按钮是可以使用的。这是函数 function properties(){ //This function gives to all of the elements inside //the widgetsCol that create the pages. wdgBox = document.getElementById('widgetsCol'); $(wdgBox).first().before("

您好，我有一个包含按钮的分区，我想在同一分区内的表中创建一个组，但当我尝试单击它们时，最后的按钮是可以使用的。这是函数

function properties(){
//This function gives to all of the elements inside
//the widgetsCol that create the pages.
wdgBox = document.getElementById('widgetsCol');
$(wdgBox).first().before("<TABLE id='wdgTbl' border='1'><TBODY id='wdgBod'></TABLE>");
tr = document.createElement('TR');
$("#wdgBod").append(tr);
cont = 0;
$(wdgBox).children().each(function(index, elmnt){
    td = document.createElement('TD');
    $(tr).append(td)
    $(elmnt).appendTo(td);
    $(elmnt).attr('new', 'true');//Add the new attribute to the element.
    makeDrag(elmnt);//And make it draggrable.
    if (cont == 2){
        cont = 0;
        tr = document.createElement('TR');
        $("#wdgBod").append(tr);
    }else{
        cont += 1;
    }
});}


<html><head father="*html" id="header">
        <title father="*head" id="ttl">KarinApp(Karina Application Web Maker)</title>
                <link href="http://www.karinapp.com/favicon.ico" id="favIcon" rel="SHORTCUT ICON">
            <link href="http://www.karinapp.com/modules/general/css/karinapp-style/jquery-ui-1.8.4.custom.css" id="jQueryUI" rel="Stylesheet" type="text/css">
        <link father="*head" href="http://www.karinapp.com/modules/appgen/css/main.css" id="general_css" rel="stylesheet" type="text/css">
        <script father="*head" id="SCRIPT1" src="http://www.karinapp.com/modules/general/scripts/jQuery.js" type="text/javascript"><!--empty--></script>
        <script id="SCRIPT2" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.core.js" type="text/javascript"><!--empty--></script>
        <script id="SCRIPT3" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.widget.js" type="text/javascript"><!--empty--></script>
        <script id="SCRIPT4" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.mouse.js" type="text/javascript"><!--empty--></script>
        <script id="SCRIPT5" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.draggable.js" type="text/javascript"><!--empty--></script> 
        <script id="SCRIPT6" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.droppable.js" type="text/javascript"><!--empty--></script>
        <script id="SCRIPT8" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.position.js" type="text/javascript"><!--empty--></script>
        <script id="SCRIPT9" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.resizable.js" type="text/javascript">\\n<!--empty--></script>
        <script id="SCRIPT10" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.dialog.js" type="text/javascript"><!--empty--></script>
        <script id="SCRIPT12" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.button.js" type="text/javascript"><!--empty--></script>
        <script id="SCRIPT12" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.autocomplete.js" type="text/javascript"><!--empty--></script>
        <script father="*head" id="SCRIPT13" src="http://www.karinapp.com/modules/general/scripts/general.js" type="text/javascript"><!--empty--></script>
        <script father="*head" id="SCRIPT14" src="http://www.karinapp.com/modules/general/scripts/Catcher.js" type="text/javascript"><!--empty--></script>
        <script father="*head" id="SCRIPT15" src="http://www.karinapp.com/modules/general/scripts/loadPage.js" type="text/javascript"><!--empty--></script>
        <script id="SCRIPT16" language="javascript" src="http://www.karinapp.com/modules/general/scripts/editor/edit_area_full.js" type="text/javascript"><!--empty--></script>
        <script father="*head" id="SCRIPT17" src="http://www.karinapp.com/modules/appgen/scripts/main.js" type="text/javascript"><!--empty--></script>
        <script father="*head" id="SCRIPT18" src="http://www.karinapp.com/modules/appgen/scripts/config.js" type="text/javascript"><!--empty--></script>
        <script father="*head" id="SCRIPT19" src="http://www.karinapp.com/modules/appgen/scripts/style.js" type="text/javascript"><!--empty--></script>
        <script father="*head" id="SCRIPT20" src="http://www.karinapp.com/modules/appgen/scripts/scripts.js" type="text/javascript"><!--empty--></script>
        <script father="*head" id="SCRIPT21" src="http://www.karinapp.com/modules/appgen/scripts/properties.js" type="text/javascript"><!--empty--></script>
        <script id="SCRIPT22" type="text/javascript">
            window.onload = function(){
                postLoad();
            }
                        function __init__(){
                                 main();
                        }
        </script>
        <link type="text/css" rel="stylesheet" father="*head" id="5ads4f54adsf5_css" href="http://www.karinapp.com/modules/5ads4f54adsf5/css/main.css"></head>
<body id="general_bod" key="f5f521844f99caeb1bd3a9063a814c47aae99052">
<div father="*html" id="body" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; " pathcls="modules/5ads4f54adsf5/css/main.css:#body"><!--empty--></div>
                                <div class="ground_div" father="*body" id="optionsDiv" style="position: fixed; ">
               <button father="@optionsDiv" id="addwdg_inp" state="open" type="button" value="Agregar componente" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Agregar componente</span></button>
               <button father="@optionsDiv" id="addPg_inp" type="button" value="Guardar Pagina" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Guardar Pagina</span></button>
               <button father="@optionsDiv" id="addPD_inp" type="button" value="Crear PostData" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Crear PostData</span></button>
               <button father="@optionsDiv" id="addBT_inp" type="button" value="Crear Instrucciones" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Crear Instrucciones</span></button>
      </div><div style="outline-width: 0px; outline-style: initial; outline-color: initial; height: auto; width: 250px; position: absolute; top: 0px; left: 1100px; display: block; z-index: 1002; " class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-WdgCol"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on"><span class="ui-dialog-title" id="ui-dialog-title-WdgCol" unselectable="on">Componentes Basicos</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on"><span class="ui-icon ui-icon-closethick" unselectable="on">close</span></a></div><div class="properties_div ui-dialog-content ui-widget-content" father="*body" id="WdgCol" main="true" style="width: auto; min-height: 0px; height: 354px; ">
                <label father="@WdgCol" for="container" id="cnt_lab">Contenedor:</label><select father="@properties_div" id="container"><option father="container" id="1" value="body">Body</option></select>
                <table id="wdgTbl" border="1"><tbody id="wdgBod"><tr><td><button id="a" tag="a" new="true" style="position: relative; " class="ui-draggable">A</button></td><td><button id="area" tag="area" new="true" style="position: relative; " class="ui-draggable">AREA</button></td><td><button id="audio" tag="audio" new="true" style="position: relative; " class="ui-draggable">Audio</button></td></tr><tr><td><button id="base" tag="base" new="true" style="position: relative; " class="ui-draggable">BASE</button></td><td><button id="0bdo" tag="bdo" new="true" style="position: relative; " class="ui-draggable">BDO</button></td><td><button id="inp" tag="input" typ="button" new="true" style="position: relative; " class="ui-draggable">Input(Button)</button></td></tr><tr><td><button id="button" tag="button" new="true" style="position: relative; " class="ui-draggable">Button</button></td><td><button id="code" tag="code" new="true" style="position: relative; " class="ui-draggable">Code</button></td><td><button id="col" tag="col" new="true" style="position: relative; " class="ui-draggable">Column</button></td></tr><tr><td><button id="clg" tag="colgroup" new="true" style="position: relative; " class="ui-draggable">Colgroup</button></td><td><button id="dl" tag="dl" new="true" style="position: relative; " class="ui-draggable">DL</button></td><td><button id="div" tag="div" new="true" style="position: relative; " class="ui-draggable">DIV</button></td></tr><tr><td><button id="form" tag="form" new="true" style="position: relative; " class="ui-draggable">Form</button></td><td><button id="h1" tag="h1" new="true" style="position: relative; " class="ui-draggable">H1</button></td><td><button id="img" tag="img" new="true" style="position: relative; " class="ui-draggable">Image</button></td></tr><tr><td><button id="input" tag="input" typ="checkbox" new="true" style="position: relative; " class="ui-draggable">Input(Checkbox)</button></td><td><button id="inp" tag="input" typ="file" new="true" style="position: relative; " class="ui-draggable">Input(file)</button></td><td><button id="inp" tag="input" typ="hidden" new="true" style="position: relative; " class="ui-draggable">Input(Hidden)</button></td></tr><tr><td><button id="inp" tag="input" typ="image" new="true" style="position: relative; " class="ui-draggable">Input(Image)</button></td><td><button id="inp" tag="input" typ="radio" new="true" style="position: relative; " class="ui-draggable">Input(Radio)</button></td><td><button id="input" tag="input" typ="text" new="true" style="position: relative; " class="ui-draggable">Input(Text)</button></td></tr><tr><td><button id="lbl" tag="label" new="true" style="position: relative; " class="ui-draggable">Label</button></td><td><button id="link" tag="link" new="true" style="position: relative; " class="ui-draggable">Link</button></td><td><button id="map" tag="map" new="true" style="position: relative; " class="ui-draggable">Map</button></td></tr><tr><td><button id="meta" tag="meta" new="true" style="position: relative; " class="ui-draggable">Meta</button></td><td><button id="obj" tag="object" new="true" style="position: relative; " class="ui-draggable">Object</button></td><td><button id="ol" tag="ol" new="true" style="position: relative; " class="ui-draggable">OL</button></td></tr><tr><td><button id="inp" tag="input" typ="password" new="true" style="position: relative; " class="ui-draggable">Input(Password)</button></td><td><button id="p" tag="p" new="true" style="position: relative; " class="ui-draggable">P</button></td><td><button id="pre" tag="pre" new="true" style="position: relative; " class="ui-draggable">PRE</button></td></tr><tr><td><button id="inp" tag="input" typ="reset" new="true" style="position: relative; " class="ui-draggable">Input(Reset)</button></td><td><button id="smp" tag="samp" new="true" style="position: relative; " class="ui-draggable">Samp</button></td><td><button id="srpt" tag="script" new="true" style="position: relative; " class="ui-draggable">Script</button></td></tr><tr><td><button id="sel" tag="select" new="true" style="position: relative; " class="ui-draggable">Select</button></td><td><button id="spn" tag="span" new="true" style="position: relative; " class="ui-draggable">Span</button></td><td><button id="stl" tag="style" new="true" style="position: relative; " class="ui-draggable">Style</button></td></tr><tr><td><button id="inp" tag="input" typ="submit" new="true" style="position: relative; " class="ui-draggable">Input(submit)</button></td><td><button id="tbl" tag="table" new="true" style="position: relative; " class="ui-draggable">Table</button></td><td><button id="tbody" tag="tbody" new="true" style="position: relative; " class="ui-draggable">TBody</button></td></tr><tr><td><button id="txt" tag="textarea" new="true" style="position: relative; " class="ui-draggable">TextArea</button></td><td><button id="tfoot" tag="tfoot" new="true" style="position: relative; " class="ui-draggable">TFoot</button></td><td><button id="thead" tag="thead" new="true" style="position: relative; " class="ui-draggable">THead</button></td></tr><tr><td><button id="ul" tag="ul" new="true" style="position: relative; " class="ui-draggable">UL</button></td><td><button id="var" tag="var" new="true" style="position: relative; " class="ui-draggable">Var</button></td><td><button id="video" tag="video" new="true" style="position: relative; " class="ui-draggable">Video</button></td></tr><tr></tr></tbody></table><div father="@WdgCol" id="widgetsCol">

               </div>
               <hr father="@WdgCol" id="hr0">
               <button father="@WdgCol" id="openPal">Abrir Paleta</button>
    </div><div class="ui-resizable-handle ui-resizable-n" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-w" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001; " unselectable="on"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002; " unselectable="on"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003; " unselectable="on"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004; " unselectable="on"></div></div></body></html>

函数属性（）{
//此函数提供给内部的所有元素
//创建页面的widgetsCol。
wdgBox=document.getElementById（'widgetsCol'）；
$（wdgBox）.first（）在（“”）之前；
tr=document.createElement（'tr'）；
$（“wdgBod”）。追加（tr）；
cont=0；
$（wdgBox）.children（）.each（函数（索引，elmnt）{
td=document.createElement（'td'）；
$（tr）.追加（td）
$（elmnt）。附件（td）；
$（elmnt）.attr（'new'，'true'）；//将新属性添加到元素中。
makeDrag（elmnt）；//并使其可拖动。
如果（cont==2）{
cont=0；
tr=document.createElement（'tr'）；
$（“wdgBod”）。追加（tr）；
}否则{
cont+=1；
}
});}
KarinApp（Karina应用程序Web Maker）
\\n
window.onload=函数（）{
后加载（）；
}
函数uuu init_uuu（）{
main（）；
}
Agregar组件
瓜达尔帕吉纳酒店
Crear PostData
克赖尔指令
基本成分
contendor:Body
AAREAAAudioBaseBOinput（按钮）按钮解码列ColGroupDLDivFormh1ImageInput（复选框）输入（文件）输入（隐藏）输入（图像）输入（单选）输入（文本）LabelinkMapMetaObjectOlInput（密码）PPREInput（重置）SampScript选择SpanStyleInput（提交）表格ModytextAreaTFoottHeadulvarVideo

帕莱塔酒店

我认为您有几个问题：

1）您在语句末尾缺少一个“；”：

$(tr).append(td)

2）您的“TBODY”元素没有结束符“/TBODY”

3） “cont”的逻辑很复杂，可能有缺陷。看起来每行只创建3个“td”元素，但我不确定

关于代码本身，恐怕我不得不同意“Helle”的说法，我将按照以下方式进行编码：

function properties(){
//This function gives to all of the elements inside
//the widgetsCol that create the pages.
    var wdgTr, cont = 0, wdgBox = $('#widgetsCol');

     // Create the table skeleton

    $(wdgBox).first().before("<table id='wdgTbl' border='1'><tbody id='wdgBod'></tbody></table>");
    wdgTr = $('<tr \>').appendTo('#wdgBod');

    $(wdgBox).children().each(function(index, element){
        $('<td />').append($(element)).appendTo(wdgTr);
        $(element).attr({new: 'true'});  // Add the new attribute to the element
        makeDrag(element);               // Make it draggable

        if (cont != 2) {cont++;} else {cont = 0; wdgTr = $('<tr \>').appendTo(wdgBod);}
    });
}

函数属性（）{
//此函数提供给内部的所有元素
//创建页面的widgetsCol。
变量wdgTr，cont=0，wdgBox=$（“#widgetsCol”）；
//创建表骨架
$（wdgBox）.first（）在（“”）之前；
wdgTr=$（''）。附录（'#wdgBod'）；
$（wdgBox）.children（）.each（函数（索引，元素）{
$（''）.append（$（元素））.appendTo（wdgTr）；
$（element.attr（{new:'true'}）；//将新属性添加到元素中
makeDrag（元素）；//使其可拖动
if（cont！=2）{cont++；}else{cont=0；wdgTr=$（“”）.appendTo（wdgBod）；}
});
}

我还想添加一些评论，以使您对“cont”的操作更加清楚

问候

Neil

hi，你可能也想为它包含html。首先：你的代码很难看-我不得不说。请不要混合使用jquery选择器和nativ js选择器。使用

var

初始化变量，如wdgBox。不要压缩变量名的单词，从长远来看不会更快。目前为止还不错。请向我展示你的html老挝提到。