[英]Binding event to dynamically created elements using jQuery
我正在上传多个图像,并将它们放置在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()
签名:
如果您的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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.