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

我的视图在更改所选照片的​​顺序后返回一个 render_to_response 版本的 photos.html，结果包含该照片集中所有照片的查询集，以及一条状态消息，即。成功，失败：

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

我的问题可能是什么？我尝试了以下建议：this SO question，但没有一个适合我。自从我从昨天起就一直在这方面，任何见解都将不胜感激。

Answer 1

当你执行 $(function...) 时，DOM 中的东西会被绑定，但是当你用其他东西替换东西时，新的东西不会被绑定。您可以使用 .live 命令使其适用于旧的和新的东西，或者您可以再次绑定新的东西（在 ajax 之后再次运行 $(".manage_photo").click(...)。
顺便说一句，您可以用简单的 $("#list").load("{% url managePhotos %}")

替换 ajax 块