点击时 Jquery 加载无法正常工作

Question

这就是我正在将 HTML 加载到...

<div id="AJAX_Parent" class="visibleBorderThick">
    <div id="AJAX_Child">
    ...
    </div>
</div>

这是使用 jquery 的加载函数加载 HTML 的链接。

<a id="MyID_1755055367" class="dynamicLink" href="/rules"> Click Me </a>

这是确保 javascript 和 jquery 正在运行的 javascript...

    <script type="text/javascript">
            alert("Javascript is running");

            if (window.jQuery) {
                alert("jQuery is loaded") 
            } else {
                alert("jQuery is not loaded")
            }

            if ( $( "#MyID_1755055367" ).length ) {
                alert("Found element"); /* Element is found */
                alert( $( "#MyID_1755055367" ).length ); /* length is 1*/
            } else {
                alert("Cannot Find Element")
            }                

    </script>

这是实际执行加载的 javascript...

    $("#MyID_1755055367").onclick = (function() {
        alert("onclick activated");
        history.pushState({ linkSource: window.location.href }, "page title", "/rules");
        $("#AJAX_Parent").load("/rules #AJAX_Child");
        return false;
    });

^ 这不起作用。我没有看到“onclick 已激活”

另外，我也试过这样...

            document.getElementById("MyID_1704232995").onclick = (function() {
                alert("onclick activated");
                history.pushState({ linkSource: window.location.href }, "page title", "/rules");
                $("#AJAX_Parent").load("/rules #AJAX_Child");
                return false;
            });

这样做会给我"onclick activated"，我看到 URL 已更改，当我在 Google Chrome 中查看页面源时，我看到与 <div id="AJAX_Child"> 有关的 HTML 已被修改。

这一切都很好，但是页面没有正确呈现（它呈现扁平 - 好像AJAX_Child 是一个空的 div）。注意：通过将 ID 移动到“”来修复此“扁平化”。美元符号加载仍然不起作用。

* 修复了 jquery *

            $(@{ Html("\"" + "#" + uniqueID.body.substring(1)) }).click(function() {
                alert("onclick activated");
                history.pushState({ linkSource: window.location.href }, "page title", @quotedURL);
                $("#AJAX_Parent").load(@{ Html(quotedURL.body.dropRight(1) + " #AJAX_Child\"") });
                return false;
            });

* 现在向前点击有效，但后退按钮不起作用（后退按钮导致 HTML 在“页面源”内发生变化，但页面保持不变）*

Answer 1

jQuery 选择器不提供onclick 处理程序。请改用.click()。 https://api.jquery.com/click/

其次，.load 接受两个参数：一个 URL 和一个回调。 https://api.jquery.com/load/

第三，请注意您的分号使用，或缺少。它让我可爱的小猫哭了。你不希望这种情况发生。永远。

Answer 2

您的 onclick 定义格式不正确。应该是这样的：

$("#MyID_1755055367").on("click", function() {
        alert("onclick activated");
        history.pushState({ linkSource: window.location.href }, "page title", "/rules");
        $("#AJAX_Parent").load("/rules #AJAX_Child");
        return false;
    });