为什么Ajax没有在第二次点击时填充DIV？

Posted 2021-04-21

我正在从TAB div中的URL加载数据，数据在第一次请求/点击时成功加载，但在第二次请求/点击它转到目标链接并且不填充目标DIV。

锚：

<li><a data-toggle="tabAjax" href="http://site.cx/admin/get-coach-stylish-view?userId={{userId}}" id="ajax_tab" class="media_node active span" data-target="#coach-view-stylish-ajax" rel="tooltip">Coach View (Stylised)</a></li>

Div填充DATA：

<!-- Coach View Stylised -->
<div id="coach-view-stylish-ajax">
</div>
<!-- Coach View Stylised End -->

JS：

<script>

$('[data-toggle="tabAjax"]').click(function(e) {
    e.preventDefault();
    var $this = $(this),
        loadUrl = $this.attr('href'),
        target = $this.attr('data-target');

    $.get(loadUrl, function(data) {
        $(target).html(data);
    });

    $this.tab('show');
    return false;
});

</script>

答案

1-尝试在您的代码中放置一个调试器，并检查第二次单击时是否调用了代码。如果没有，那么您需要重新绑定click事件。

2-你可以这样试试

<li><a data-toggle="tabAjax" href="#" data-href="http://site.cx/admin/get-coach-stylish-view?userId={{userId}}" id="ajax_tab" class="media_node active span" data-target="#coach-view-stylish-ajax" rel="tooltip">Coach View (Stylised)</a></li>

make href =“＃”并将url存储在data-href =“...”中

并在您的javascript中

<script>

$('[data-toggle="tabAjax"]').click(function(e) {
    e.preventDefault();
    var $this = $(this),
        loadUrl = $this.attr('data-href'), //change href to data-href
        target = $this.attr('data-target');

    $.get(loadUrl, function(data) {
        $(target).html(data);
    });

    $this.tab('show');
    return false;
});

</script>