Question

我已经在其他问题和Google上进行了大量研究，到目前为止还没有任何效果。我有一些JavaScript / jQuery经验，并认为自己精通PHP。

我正在开发一个使用jQuery从导航菜单加载页面的工作应用程序。到目前为止，这是该元素的设置：

<menu>
    <button value="home">HOME</button>
    <button value="process_sheets">PROCESS SHEETS</button>
    <button value="admin">ADMINISTRATION</button>
    <button value="faq">FAQ</button>
    <div id="search-container"></div>
</menu>

<script>

$("menu button").each(function() {
    $(this).on("click", function() {
        $.get(null, {
            page: $(this).val()
        }, function(data) {
            $("article#content").html($.parseHTML(data));
        }, 'html');
    });
});

</script>

问题是我在一个页面上有一个简单的手风琴，其代码在通过菜单加载时无效。

这是手风琴代码：

$(function($) {
    $('#accordion').find('.accordion-toggle').on('click', function(){
        $(this).next().slideToggle('fast');
        $(".accordion-content").not($(this).next()).slideUp('fast');
    });
});

<h2>Process Sheets</h2>
<div id="process-sheets-accordion">
    <h4 class="accordion-toggle">GE</h4>
    <div class="accordion-content">
<?php include 'static_section_form.php'; ?>
    </div>
    <h4 class="accordion-toggle">5"</h4>
    <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
    </div>
    etc...
</div>

Answer 1

如果有问题的代码实际上是在ajax调用返回的文本中，那么问题是当你通过get加载并执行解析并将其添加到页面时，它不会被执行

jQuery有一个专门为此做的功能，但是：load：

$("menu button").each(function() {
    $(this).on("click", function() {
        $("article#content").load(null, {page: $(this).val()});
    });
});

load将使用ajax检索页面，从中提取脚本，将内容放入元素中，然后执行脚本。

以上将使用POST，因为我们将对象作为第二个参数传递，但是当您使用GET时，我们应该只将page添加到URL：

$("article#content").load(location.pathname + "?page=" + encodeURIComponent($(this).val()));

...或将其作为字符串传递：

$("article#content").load(location.pathname, "page=" + encodeURIComponent($(this).val()));

如果您没有提供数据对象，load默认为GET而非POST。

附注：我之前从未见过null $.get的网址。我已将其复制到上面的load来电，但我认为null无效（在任何一个地方），因为文档中没有任何说法可以是一个字符串。使用实际的网址，例如上面GET示例中使用的location.pathname我。

Answer 2

这是代码的工作片段，完全符合我的预期：

$("menu button").each(function() {
    $(this).on("click", function() {
        $("#content").load(window.location.pathname + "?page=" + encodeURIComponent($(this).val()));
    });
});

如何使用加载AJAX的内容使用javascript？

2 个答案: