动态生成的HTML代码没有jQuery属性
Dynamically Generated HTML codes do not have jQuery attributes
我有一个div列表,可以使用jquery进行拖动。
<div id="external-events">
<h4>List Of Staffs</h4>
<div class="external-event" data-id="1">Name</div> //Draggable
</div>
这是使其可拖动的代码
$('#external-events div.external-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()),
id: $(this).data('id')
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
所以我必须实现它,使Div是动态的,所以我添加了生成它的代码。它正确地生成了它,但它没有获得jQuery属性,如可拖动。以下是javascript代码:
$(document).ready(function () {
$.ajax({
type: "POST",
url: "Default.aspx/getListOfStaff",
data: {},
contentType: "application/json",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return.
$("#external-events").html(msg.d);
}
});
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()),
id: $(this).data('id')
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
我使用了firebug并检查了生成的html,它完全相同。有什么想法吗?
这是因为默认情况下$.ajax函数不是同步的。这意味着在$.ajax调用之后,请求可能还没有完成,这意味着$("#external-events")
查询将返回0个元素。
试试这个:
$(document).ready(function () {
function makeDraggable() {
$('#external-events div.external-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()),
id: $(this).data('id')
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
}
$.ajax({
type: "POST",
url: "Default.aspx/getListOfStaff",
data: {},
contentType: "application/json",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return.
$("#external-events").html(msg.d);
makeDraggable();
}
});
});
相关文章:
- 使用jQuery属性滚动到数据
- 删除具有jQuery属性的li
- Jquery 属性代码到 Javascript 属性代码
- 使用 *= 的 jQuery 属性选择器
- 奇怪的jquery属性添加到IE8中的复选框上
- HTML 使用 JavaScript 添加具有 JQuery 属性的元素
- 如何将 fadeOut jQuery 属性与 Javascript 文本片段一起使用
- 不区分大小写的 jQuery 属性选择器
- IE中的jQuery属性选择器
- JQuery属性总是返回相同的值
- 任务不可能:jQuery属性选择器
- 如何在jquery插件EasyDate中使用jquery属性
- onclick的jquery属性监听器
- 动态生成的HTML代码没有jQuery属性
- 如何将多个变量从函数传递到jquery属性
- 当Ajax.BeginForm时在Internet Explorer 8上添加的jQuery属性
- JQuery 属性通配符 包含分隔的空格
- jQuery属性自动切换
- 当jquery属性选中复选框时,Angular ng-model不更新
- 理解使用#的jQuery属性选择器