jQuery UI不会加载到.button的$(“#content”）.load页面上

jQuery UI does not load on $("#content").load page for .button

本文关键字：#content load UI 加载 button jQuery      更新时间：2023-09-26

我似乎在以下方面犯了一个错误：html:index.html、main.html等js:jQuery，jQuery UI，own.js，own_main.js

最终的结果应该是一个索引页，它基于菜单选择在div中加载一个html。加载的HTML有一个按钮元素，我想将它与jQueryUI一起使用。

Index.html

<html lang="us">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dev</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="css/kendo.dataviz.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link href="css/typ.css" rel="stylesheet" />
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/typ.js"></script>
<script src="js/typ-persons.js"></script>
</head>
<body>    
<div id="content"></div>
</body>
</html>

典型.js文件

function currentLoc(goToLoc) {
    if (CheckLogin() == 0) {
        //Not logged in, go to main
        $("#content").load("/main.html");
        window.localStorage.globalLocation = "/main.html";
    } else {
        if (goToLoc == '') {
            console.log("No GoToLoc: " + goToLoc);
            if (window.localStorage.globalLocation == '') {
                console.log("No Global location");
                $("#content").load("/main.html");
                window.localStorage.globalLocation = "/main.html";
            } else {
                console.log("Global Location " + window.localStorage.globalLocation);
                $("#content").load(window.localStorage.globalLocation);
            }
        } else {
            console.log("GoToLoc " + goToLoc);
            $("#content").load(goToLoc);
            window.localStorage.globalLocation = goToLoc;
        }
    }
}

persons.html

<script src="js/typ-persons.js"></script>
<div class="container">
    <style>
        #toolbar {
            padding: 4px;
            display: inline-block;
        }
        /* support: IE7 */
        * + html #toolbar {
            display: inline;
        }
    </style>
    <div id="toolbar" style="width:100%;" class="ui-widget-header ui-corner-all">
        <button id="btnNew" ></button>
        <button id="btnSave"></button>
        <label for="persons">Find Person by Name or ID: </label>
        <input type="text" class="input-sm" id="persons">
        <input type="hidden" id="person-id">
    </div>
</div>

类型-人员.js

$(function () {
    $("#btnNew").button({
        text: false,
        label: "New Person",
        icons: {
            primary: "ui-icon-document"
        }
    })
   .click(function () {
   });
    $("#btnSave").button({
        text: false,
        label: "Save",
        disabled: true,
        icons: {
            primary: "ui-icon-disk"
        }
    })
    .click(function () {
   });
});

在persons页面上还有一个带有json数据的autocomplete元素。这很有魅力。问题是工具栏没有从type-persons.js中应用按钮。当我将jQuery UI添加到persons.html中时，按钮会正常工作，并按照预期进行样式设置。那么问题是jQuery UI加载两次，鼠标悬停时自动完成drowdown就会消失。这有点自相矛盾，我希望两者都能工作。

谢谢你的帮助，Joris

  1. 我有预感，您的persons.html文件就是代码中寻址的main.html。否则，我看不出你在哪里加载persons.html，也看不出当你加载main.html时你在加载什么

  2. 如果您的主html文件中已经有typ-persones.js，为什么要将其添加到persones.html？在添加的方式中，将对按钮单击进行双重绑定。我相信不止一次。它将工作在第一次加载，然后螺丝按钮的行为永远。

编辑：在OP澄清之后，这些是我的建议。

首先：不要将新的JS放入personnel html中，而是使其成为纯html。当内容容易被多次加载时，请确保不要使用id属性。在这种情况下，最好使用类。

<div class="container">
    <style>
        #toolbar {
            padding: 4px;
            display: inline-block;
        }
        /* support: IE7 */
        * + html #toolbar {
            display: inline;
        }
    </style>
    <div id="toolbar" style="width:100%;" class="ui-widget-header ui-corner-all">
        <button class="btnNew" ></button>
        <button class="btnSave"></button>
        <label for="persons">Find Person by Name or ID: </label>
        <input type="text" class="input-sm" id="persons">
        <input type="hidden" id="person-id">
    </div>
</div>

第二个：因为您不会在ajax调用中加载新的JS，所以您需要在某个地方赋予新按钮它们的行为，对吧？在附加它们之后，使用jQuery的回调，尝试执行。我建议您使用get方法，而不是load，以便对新内容有更多的控制。代替

 $("#content").load("/persons.html");

尝试

$.get("/persons.html",function(responseText) {
    var newElement=jQuery(responseText);
    $("#content").append(newElement);
    $(".btnNew", newElement).button({
        text: false,
        label: "New Person",
        icons: {
            primary: "ui-icon-document"
        }
    }).click(function () {
    });
    $(".btnSave",newElement).button({
        text: false,
        label: "Save",
        disabled: true,
        icons: {
            primary: "ui-icon-disk"
        }
    }).click(function () {
    });
});

第三：无论需要在动态元素上设置什么侦听器，都要将它们委托给文档，以避免重新声明它（有双重绑定的风险）。我在你的原始文章中没有看到这样的例子，但如果你有任何点击、聚焦或模糊听众的情况（仅举几个例子），我会提供一个实际的例子。

相关文章：