Как грузить через AJAX .load("div.html") более одного раза?

Question

[Kery]

Есть код

("#item").click(function(){
	$("#grid").load("js/template/template.html");
});

Кликаешь по #item и все подгружается, но когда я кликаю еще раз, ничего не происходит. Нужно что б добавлялся контент каждый раз когда кликаешь на кнопку.

template.html

<div class="name">aaa</div>

Answer 1

[Mikhail Osher]

Вполне очевидно, что запрос кэшируется.

stackoverflow.com/questions/168963/stop-jquery-loa...

Answer 2

[Damir Makhmutov]

Я почти уверен что заработает вот так

("#item").click(function(){
	$("#grid").load("js/template/template.html?" + (new Date).getTime());
});

Но нужно ли это вам ?

Comments

[Kery]

не сработало

[Damir Makhmutov]

Так проблема же очевидна. Вы в #grid постоянно подгружаете некоторый DOM. А вам нужно добавлять в этот #grid. Т.е. примерно так

$.get("js/template/template.html", function(response) {
$("#grid").append(response);
});

Не тестил, но думаю что именно так вам нужно делать

Answer 3

[Максим Барулин]

если кнопка находится внутри элемента содержимое которого заменяется новым, событие умирает вместе с ним. Нужно перебиндивать его.
как-то так:

("#item").click(load_html);

function load_html()
{
    $("#grid").load("js/template/template.html", function(){
        $("#item").unbind('click').click(load_html)
    });
}

Comments

[Kery]

кнопка вообще в другом диве, никак не связаны

Answer 4

[offyura]

$('body').on('click', '#item', function(){
$("#grid").load("js/template/template.html");
})

Comments

[offyura]

ну или так:

$('body').on('click', '#item', function(){
$("#grid").empty();
$("#grid").load("js/template/template.html");
})

[Kery]

что за метод .on вообще?

[Сергей Мельников]

метод .on() вешает событие на элемент jquery,
допустим, при клике на elem надо вызвать функцию callback:
elem.on('click', callback);

[offyura]

щас всегда использую метод .on(). Его прелесть в том, что можно вешать событие на динамически добавленные элементы