Javascript 为什么Ajax不在第二次单击时填充DIV？

我正在从选项卡

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>

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

<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>

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>

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

<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>

JS:

<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>

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

<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>

$（'[data toggle=“tabAjax”]'）。单击（函数（e）{
e、 预防默认值（）；
变量$this=$（this），
loadUrl=$this.attr（'href'），
target=$this.attr（'data-target'）；
$.get（加载URL，函数（数据）{
$（目标）.html（数据）；
});
$this.tab（'show'）；
返回false；
});

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>

制作href=“#”并将url存储在数据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>

$（'[data toggle=“tabAjax”]'）。单击（函数（e）{
e、 预防默认值（）；
变量$this=$（this），
loadUrl=$this.attr（'data-href'），//将href更改为data href
target=$this.attr（'data-target'）；
$.get（加载URL，函数（数据）{
$（目标）.html（数据）；
});
$this.tab（'show'）；
返回false；
});

您可以尝试使用方法而不是单击$（文档）@moshiuramit感谢我将下面的答案与您的建议结合在一起，它成功了：）它阻止了到目标url的访问，但它挂起了页面，现在什么也不加载@伊玛杜丁做完了吗？将调试器放在click事件中，并调试失败的地方。是的，它工作了！如何放置调试器可以请您详细说明吗？只需编写调试器；无论您想调试到哪里。例如

code

$（'[data toggle=“tabAjax”]'）。单击（函数（e）{e.preventDefault（）；调试器；var$this=$（this），loadUrl=$this.attr（'data-href'），//将href更改为data href target=$this.attr（'data-target'）；$.get（loadUrl，函数（data）{debugger；$（target.html（data）；}）；$this.tab（'show'）；返回false；}）<代码>代码加载页面之前，确保检查元件控制台打开。它将到达调试行。请查看此url