我正在上传多张图片并将它们放在一些 div 中,onclick 必须切换一些类。我是否必须将添加 onclick 事件的部分放在 ajax 成功函数中?多谢!
我正在“打开”使用 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()
签名:
如果您的 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');
});
关于javascript - 使用 jQuery 将事件绑定(bind)到动态创建的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43587213/