0

したがって、次のコードがあり、JQueryコンテキストから呼び出されたときにglassLoad（）が機能しません。問題を1つの特定の行に分離しました。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

これを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セレクターメソッドを使用して、$$()返されたリストの最初の要素を選択し、その要素のクリックイベントにアタッチしたときにトリガーされます。

javascriptの残りの部分は、jQueryまたはPrototypeに依存しているようには見えないため、このコードスニペットをコードにスワップできるはずです。

于 2013-03-11T02:53:02.943 に答える
1

Glassbox.jsはjQueryをサポートしていないようです。これは、代替フレームワークであるPrototypeで動作するように構築されています。したがって、代わりにPrototypeを使用するか、代替プラグインを見つける必要があります。

于 2013-03-10T22:45:52.683 に答える