jQuery html() to replace div contents works only for the first time
I'm using an AJAX request to h开发者_开发百科andle some part of my app that deals with managing photos...the user can click on a '<' or '>' button to change the ordering of the photos. All works well, but only for the first time I click the button...subsequent clicks do not trigger anything.
Main template:
<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 %}
Code for 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">
<
</button>
<button class="manage_photo" name="decr" id="{{ photo.id }}"
style="float: right">
>
</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 %}
My view returns a render_to_response version of photos.html after changing the ordering for the selected photo, with results containing the queryset for all photos in that photo's set, and a status message ie. success, failed:
return render_to_response('ajax/photos.html', results)
What could be my issue? I tried the suggestions at: this SO question, but none work out for me. Any insight would be very much appreciated since I've been at this since yesterday.
when you do the $(function...) things that are in the DOM get bound, but when you replace stuff with other stuff, the new stuff is not bound. You could use the .live command to make it work for old and new stuff, or you could bind the new stuff again (run the $(".manage_photo").click(...) again after the ajax.
BTW, you could replace the block of ajax with a simple $("#list").load("{% url managePhotos %}")
精彩评论