我正在上传多个图像,并将它们放置在ondiv必须切换某些类的某些div中。我是否必须将添加onclick事件的部分放在ajax成功函数中?非常感谢!
我正在使用“ on”上的jquery,但似乎不起作用。可能我缺少了一些东西
这是我的代码:
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>
对于动态创建的元素,您必须使用.live()但是,live()在1.7中不推荐使用,而在中将其on()完全删除1.9。该live()签名:
live()
on()
1.9
如果您的版本jQuery大于1.9,则可以使用jQuery.fn.on
jQuery
我建议在.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'); });