Question

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

最终结果应该是一个基于菜单选项的索引页面在div中加载html。加载的HTML有一个我想用于jQuery UI的按钮元素。

的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>

typ.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>

典型值-persons.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 () {

   });
});

在个人页面上还有一个带有json数据的自动完成元素。这就像一个魅力。问题是工具栏没有从typ-persons.js获取应用的按钮。当我将jQuery UI添加到persons.html时，按钮可以正常工作并按照预期进行样式设置。问题是jQuery UI加载两次，自动完成drowdown在鼠标悬停时消失。这里有一种悖论，我希望两者都有效。

感谢您的帮助，里斯

Answer 1

我确信你的persons.html文件是代码中的main.html。否则我无法看到你加载person.html的位置或加载main.html时加载的是什么。
为什么要将 typ-persons.js 添加到 persons.html ，如果您已经在主html文件中添加了它？在它添加的方式中，按钮点击会有双重绑定。我相信不止一次。它可以在第一次加载时工作，然后按下螺丝按钮行为。

首先：不要将新的JS放入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 方法而不是加载来对新内容进行更多控制。而不是

$("#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 () { }); });

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

jQuery UI不会加载$（“＃content”）。加载.button页面

1 个答案: