jQuery html () для замены содержимого div работает только в первый раз

Question

Я использую запрос AJAX для обработки некоторой части моего приложения, которая занимается управлением фотографиями ... пользователь может нажать кнопку «<» или «>», чтобы изменить порядок фотографий.Все работает хорошо, но только первый раз нажимаю кнопку ... последующие нажатия ничего не вызывают.

Основной шаблон:

<script type="text/javascript">
$(function() {
    $(".manage_photo").click(function(event) {
        event.preventDefault();

        var id = $(this).attr("id");
        var action = $(this).attr("name");
        var data = { id: id, action: action };

        $.ajax({
            type: "POST",
            url: "{% url managePhotos %}",
            data: data,
            success: function(results) {
                $("#list").html(results);
            },
        });
    })
})
</script>

....

{% if photos %}
    <p><strong>{{ photos.count }} photo(s) added</strong></p>
    <div class="highslide-gallery">
        <div id="list">
            {% include "ajax/photos.html" %}
        </div>
    </div>
    <div class="cleaner"></div>
{% else %}
    <h5>Photos not yet added</h5>
{% endif %}

Код для ajax / photos.html:

{% for photo in photos %}
<div class="vehicle_photo">
    <button class="manage_photo" name="incr" id="{{ photo.id }}"
        {% if forloop.first %} disabled="disabled"{%endif %} style="float: left">
        &nbsp;<&nbsp;
    </button>
    <button class="manage_photo" name="decr" id="{{ photo.id }}" 
        style="float: right">
        &nbsp;>&nbsp;
    </button>
    <br />
    <a href="{{ photo.original_image.url }}" class="highslide" 
        onclick="return hs.expand(this)">
        <img class="ui-corner-all" src="{{ photo.thumbnail_image.url }}" />
    </a>
    <br />
    {{ photo.position_number }}
</div>
{% endfor %}

Мой вид возвращает версию photos.html render_to_response после изменения порядка для выбранной фотографии, с результатами, содержащими набор запросов для всех фотографий вэта фотография установлена, и сообщение о статусе т.е.успех, неудача:

return render_to_response('ajax/photos.html', results)

В чем может быть моя проблема?Я попробовал предложения в: этот ТАК вопрос , но ни один из них не сработал для меня.Любое понимание будет очень цениться, так как я был в этом со вчерашнего дня.

Answer 1

когда вы выполняете $ (function ...) вещи, которые находятся в DOM, связываются, но когда вы заменяете вещи другими вещами, новые вещи не привязываются. Вы можете использовать команду .live, чтобы она работала со старым и новым материалом, или вы можете снова связать новый материал (снова запустите $ (". Manage_photo"). Click (...) после ajax.
Кстати, вы можете заменить блок ajax простым $ ("# list"). Load ("{% url managePhotos%}")