Question

我正在使用AJAX请求来处理我的应用程序中处理照片管理的部分内容......用户可以点击“＆lt;”或'＆gt;'按钮可以更改照片的顺序。一切运作良好，但仅在我第一次点击按钮时...后续点击不会触发任何内容。

主要模板：

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

可能是我的问题？我在this SO question尝试了这些建议，但没有一个能为我做好准备。自从昨天以来我一直在这里，我会非常感激任何见解。

Answer 1

当你执行$（函数...）DOM中的东西被绑定时，但当你用其他东西替换东西时，新的东西不受约束。您可以使用.live命令使其适用于旧的和新的东西，或者您可以再次绑定新的东西（运行$（“。manage_photo”）。在ajax之后再次单击（...）。
顺便说一下，你可以用简单的$（“＃list”）替换ajax块.load（“{％url managePhotos％}”）

用于替换div内容的jQuery html（）仅适用于第一次

1 个答案: