Question

当我点击下拉菜单时，我要做的是将另一个页面中的特定div加载到div中。

以下是我的下拉菜单代码，div #location-info是我想要提取信息的地方。

<div class="nav-location">
    <ul>
        <li class="locationhead"><a href="#">Select Locations</a>
            <ul id="location-options">
                <li><a href="http://modocom.ca/gillons/atikokan/">Atikokan</a></li>
                <li><a href="http://modocom.ca/gillons/dryden/">Dryden</a></li>
                <li><a href="http://modocom.ca/gillons/emo/">Emo</a></li>
                <li><a href="http://modocom.ca/gillons/fort-frances/">Fort Frances</a></li>
                <li><a href="http://modocom.ca/gillons/rainy-river/">Rainy River</a></li>
                <li><a href="http://modocom.ca/gillons/red-lake/">Red Lake</a></li>
                <li><a href="http://modocom.ca/gillons/sioux-lookout/">Sioux Lookout</a></li>
                <li><a href="http://modocom.ca/gillons/thunder-bay/">Thunder Bay</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="location-info"></div>

现在这是我网站页脚中的脚本，试图从该下拉列表中的每个项目的href中提取内容...

$('#location-options').on('click', 'a', function (event) {
    $el = $(event.target);
    $.ajax({
        type: 'GET',
        url: $el.attr('href'),
        success: function (html) {
            $('#location-info').html(html);
        }
    });

    return false;
});

我认为这会从你点击的下拉列表中的每个其他页面的div位置信息中提取信息，这样信息会发生变化，你会得到位置信息，例如，这是modocom的页面.ca / gillons / emo我想从location-div

中提取信息

<div id="location-info">
    <div class="sevencol">
        <h4>Gillons  | Emo</h4><p>74 Front St<br />Emo, ON P0W 1E0</p>
        <p>Phone: (807) 482-2146<br />Fax: (807) 482-2757</p>
    </div>
    <div class="fivecol last">
        <h4>Office Hours</h4><p>Monday-Friday<br />8:30am - 5:00pm</p>
    </div>
</div>

因此，当有人点击Emo时，上面的HTML就是我试图进入location-info div的，然后当你从Dropdown中选择不同的位置时，它会改变。

我正在使用Wordpress，但这些东西都是硬编码的。

希望有人可以伸出援助之手，挣扎于此，似乎可以绕过它。

Answer 1

我认为您的问题是，在$('#location-info').html(html);行中，您从所选链接中提取整个网站内容，并将其填入您的<div>。相反，您应该只从<div id="location-info">变量中获取html。此处也没有阻止点击的正常行为 - 它只是在链接之后。此外$el.attr('href')不会返回带链接的字符串，而是返回一个空对象，请自行检查。

编辑：我能够将'click'事件绑定到每个链接，因此它不是跟随链接，而是简单地在div中显示href，然后发出ajax请求。

这是我的JSFiddle示例：

http://jsfiddle.net/mUThR/51/

Ajax请求失败，但在控制台中我可以看到它归于Proxy 407 error, access denied;但它应该在你的机器上工作。如果是这样，你仍然需要从返回的html中提取适当的div。

干杯。

使用下拉菜单使用Ajax的动态内容

1 个答案: