0

如果您有时间帮助我，将不胜感激，因为这是我第一次使用该jQuery.ajax()方法。这里有一个示例的链接：

http://www.the-session.co.uk/ajax/

我有以下 HTML 标记。我在页面上有两个小部件，小部件 A 和小部件 B。小部件 A 内部是<a>更新小部件 B 的元素，小部件 B 内部是<a>更新小部件 A 的元素。单击时，会针对任一 widgetA.php 向服务器发出请求或widgetB.php，当A被点击时，只有B应该更新，当B被点击时，只有A应该更新。

<div id="wrapper">
    <div class="container_12 clearfix" id="main_content">
        <div class="ajax_container width50 left">
            <?php include("widgetA.php"); ?>
        </div>
        <div class="ajax_container width50 left">
            <?php include("widgetB.php"); ?>
        </div>
    </div>
</div>

HTML 指向服务器上的两个简单 PHP 包括：

首先是widgetA.php 

<div class="widget" data-widget="A" data-controls="B">
    <div class="header">
        <h2>Widget A</h2>
    </div>
    <div class="body">
        <p><?php echo date('h:i:s'); ?></p>
        <p><a href="#">Updated widget B</a></p>
    </div>
</div>

第二个是widgetB.php 

<div class="widget" data-widget="B" data-controls="A">
    <div class="header">
        <h2>Widget B</h2>
    </div>
    <div class="body">
        <p><?php echo date('h:i:s'); ?></p>
        <p><a href="#">Updated widget A</a></p>
    </div>
</div>

到目前为止，我已经编写了以下 jQuery 脚本，但我认为我没有正确委派该事件。当我单击<a>小部件 A 中的元素并.replaceWith()在 AJAX 调用之后使用该方法时，似乎在更新 DOM 时事件处理程序不再附加到小部件 B 中的元素。我使用 jquery 的初始选择应该是.ajax_container？

其次，有没有一种方法可以让我使用该方法通过使用属性和PHP 中包含.data()的属性来更新小部件？data-widgetdata-controls

最后有没有办法避免使用两个单独的 AJAX 调用来减少这段代码的冗余？因为我似乎在重复第二次 AJAX 调用。

$(function() {

    $(".widget[data-widget='A']").on('click', 'a', function(e) {
        $.ajax("widgetB.php", {
            cache: false
        }).done(function(html) {
            $(".widget[data-widget='B']").replaceWith(html);
        });     
        e.preventDefault();
    });


    $(".widget[data-widget='B']").on('click', 'a', function(e) {
        $.ajax("widgetA.php", {
            cache: false
        }).done(function(html) {
            $(".widget[data-widget='A']").replaceWith(html);
        });     
        e.preventDefault();
    });
});
4

1 回答 1

0

我想这就是你要找的。它将两个功能合二为一，利用数据属性，并正确替换内容。

$(".widget[data-widget]").on('click', 'a', function(e) {
    var widgetClicked = $(this).data("widget");
    var widgetControls = $(this).data("controls");

    $.ajax("widget" + widgetControls + ".php", {
        cache: false
    }).done(function(html) {
        $(".widget[data-widget='" + widgetControls + "']").html(html);
    });     
    e.preventDefault();
});
于 2013-05-15T23:15:43.877 回答