我正在上传多个图片并将它们放在一些div中,其中onclick必须切换一些类。我是否必须在ajax成功函数中放置我添加onclick事件的部分?非常感谢!
我正在使用jquery“on”,但似乎不起作用。可能我错过了什么
这是我的代码:
使用Javascript:
$(".box-picture-selected > div > div").on( 'click' , function () {
$(this).toggleClass('image-selected');
});
$('#uploadForm').submit(function (e) {
e.preventDefault();
var form = new FormData($('form')[0]);
var files = document.getElementsByClassName('pics');
for (var i=0; i<files.length; i++) {
form.append("files[" + i + "]", files[i][0]); // add receipt to form
}
form.append('action', 'upload-photos'); // specify action
form.append('csrfmiddlewaretoken', '{{ csrf_token() }}');
$.ajax({
url: '{{url("/photos/device")}}',
type: 'POST',
data: form,
cache: false,
processData: false,
contentType: false,
success:function(data) {
$.each($(data), function(key, value) {
var displayDiv = document.getElementById("displayPics");
var grid = document.createElement("div");
grid.setAttribute("class", 'col-md-3 col-sm-4 col-xs-6 grid-changes image-selected');
var picDiv = document.createElement("div");
picDiv.setAttribute("class" , 'col-xs-12 images-box');
picDiv.setAttribute("style", 'background-image: url({{ url('fit/?image='.urlencode(asset('filestorage/temp'))) }}' + '%2F' + value + ');' );
displayDiv.appendChild(grid);
grid.appendChild(picDiv);
});
},
error: function(xhr, desc, err) {
// I have some error handling logic here
}
});
});
HTML:
<div id="displayPics" class="col-xs-12 grid-4-picture">
@if (isset($files) && !empty($files))
@foreach ($files as $photo)
<div class="col-md-3 col-sm-4 col-xs-6 grid-changes">
<div class="col-xs-12 images-box" style="background-image: url({{ url('fit/?image='.urlencode(asset('filestorage/temp/'.$photo))) }});"></div>
<input type="hidden" value="{{ url('fit/?image='.urlencode(asset('filestorage/temp/'.$photo))) }}">
</div>
@endforeach
@endif
</div>
答案 0 :(得分:6)
对于动态创建的元素,您必须使用.live()但是,live()
在1.7中已弃用,而不是on()
,并已在1.9
中完全删除。 live()
签名:
如果您的jQuery
版本的版本高于1.9
,则可以使用jQuery.fn.on
我建议使用下面的.on
是.on功能的签名
$(document).on( eventName, selector, function(){} );
$("body").on("click", "#YOUR_DYNAMICALLY_CREATED_ELEMENT", function(event){
//Do Some stuff
});
解决版本:
$("body").on('click', '.box-picture-selected > div > div', function(event)
{
$(this).toggleClass('image-selected');
});