Почему Ajax не заполняет DIV на втором клике?

Question

Я загружаю данные с URL-адреса внутри TAB div, данные загружаются успешно при первом запросе / щелчке, но при втором запросе / щелчке они переходят по целевой ссылке и не заполняют целевую 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>

Answer 1

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>