0

所以我有以下代码，从 JQuery 上下文调用时 glassLoad() 不起作用。我已将问题隔离到一个特定的行，myBox.apos('170px', '150px');这似乎阻止了整个函数的运行，但仅在从 JQuery 调用时。如果我使用标准onclick="glassLoad();"，它会完美地运行该函数，但如果我在 JQuery 中包含该函数，它将停止整个 JQuery 函数的运行：

    @model IEnumerable<OneEightyWebApp.Models.PropertyDB>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../Content/javascripts/glassbox/glassbox.js" type="text/javascript"></script>

<head>


    <title></title>


    <script type="text/javascript">

        function populate() {
            var select = document.getElementById("centres");
            for (var i = 1; i <= 10; i++) {
                var option = document.createElement("option");
                option.value = i;
                option.text = i;
                select.appendChild(option);
            }
        }

        function divGenerator() {
            var div;
            for (var i = 1; i <= document.getElementById("revisions").value; i++) {

                div = document.createElement("div");
                div.className = "class1";
                div.innerHTML = "Space " + i;
                div.style.width = "100px";
                div.style.height = "100px";
                div.style.float = "left";
                document.getElementById("container2").appendChild(div);
            }
        }

        function glassLoad() {

            path_to_root_dir = "../../Content/";
            var myBox = new GlassBox();
            myBox.init('myBox', '128px', '62px', 'hidden');
            myBox.apos('170px', '150px');
        }



    </script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("body").on("click", ".class1", function () {
                glassLoad();
                alert("div clicked");
            });
        });

    </script>

</head>

<body>
    <!--
<a href="javascript:myFunc();">popup</a>
-->
    <div id="container1" style="width: auto; height: 50px;">

        <button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
        @Html.DropDownList("revisions", (List<SelectListItem>)ViewData["revisions"])
    </div>
    <div id="container2" style="margin: 10px; float: left;"></div>

    <div id="myBox">Hello!</div>
</body>
4

2 回答 2

1

Glassbox.js似乎不支持 jQuery。它是为与Prototype一起使用而构建的，Prototype是一个替代框架。因此，您必须改用 Prototype 或找到替代插件。

于 2013-03-10T22:45:52.683 回答
1

使用 PrototypeJS 使其运行

<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"> </script>
<script type="text/javascript">
    document.observe('dom:loaded',function(){
        $$("body")[0].on('click', ".class1", function () {
            glassLoad();
            alert("div clicked");
        });
    });
</script>

这将在 DOM 加载并使用 CSS 选择器方法$$()并选择返回的列表中的第一个元素时触发，然后附加到该元素的 click 事件。

您的 javascript 的其余部分看起来并不依赖于 jQuery 或 Prototype，因此您应该能够将此代码片段交换到您的代码中。

于 2013-03-11T02:53:02.943 回答