作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我通过每秒调用的 ajax 调用动态地将列表项添加到 jQuery 中的列表。
下面是ajax调用的代码。
$.ajax({
url: 'php/update_group_list.php',
data: '',
dataType: 'json',
success: function(data) {
var id = data.instructor_id;
group_cnt = data.group_cnt,
group_name = data.group_name,
group_code = data.group_code;
for (i = current_row; i < group_cnt; i++)
{
//setInterval(function() { $('#group-list-div').load('php/group_list.php'); }, 5000);
$('#group-list').append("<li><a href='#' data-role='button' class='view-group-btns' id='"+group_code[i]+"' value='"+id+"' text='"+group_name[i]+"'>"+group_name[i]+"</a></li>");
$('#delete-group-list').append("<fieldset data-role='controlgroup data-iconpos='right'>" +
"<input id='"+group_code[i]+i+"' value='"+group_code[i]+"' type='checkbox' name='groups[]'>" +
"<label for='"+group_code[i]+i+"'>"+group_name[i]+"</label>" +
"</fieldset>");
}
current_row = i;
$('#group-list').listview('refresh');
$('#delete-group-list').trigger('create');
}
});
现在我有两个问题
第一个问题:
当我尝试运行下面的代码时(如果在上面的代码中在此行 $('#group-list').blah...blah 中创建了任何列表项,它应该会显示一个警告框),什么也没有发生了。
$(".view-group-btns").click(function()
{
alert("check");
});
第二个问题:
此外,当我尝试发送复选框的表单数据时(引用行 $('#delete-group-list').blah...blah 在上面的 ajax 调用代码中),帖子返回错误 unexpected token <
我做错了什么?我认为这两个问题是相关的,因为我正在创建动态使用的列表项。
这是与第二个问题相关的额外代码
HTML:
<form id='delete-group-form' action='php/delete_groups.php' method='post'>
<h3 style='text-align: center;'>Check the Box Beside the Groups you Would Like to Delete </h3>
<div style='margin-top: 20px;'></div>
<div id='delete-group-list'>
</div>
<div style='margin-top: 20px;'></div>
<input type='submit' id='delete-groups-btn' data-theme='b' value='Delete Groups(s)'>
</form>
JS代码
$('#delete-group-form').submit(function(e)
{
e.preventDefault();
alert($('#delete-group-form').serialize());
if ($('#delete-group-form').serialize() == "")
{
alert('No groups selected to be deleted.')
return false;
}
else
if ($('#delete-groups-form').serialize() == null)
{
alert('No groups selected to be deleted.')
return false;
}
else
{
$.post('php/delete_groups.php',$('#delete-groups-form').serialize()).done(function(data)
{
obj = jQuery.parseJSON(data);
var group_codes = obj.group_list;
alert(group_codes);
alert("The selected groups have been deleted");
window.setTimeout(2000);
return false;
});
}
return false;
});
删除组.php
<?php
$group_codes = $_POST['groups'];
$items = array('group_list'=>$group_codes); //creating an array of data to be sent back to js file
echo json_encode($items); //sending data back through json encoding
?>
我认为第二个问题的根源是行 $group_codes = $_POST['groups'];特别是 $_POST['groups'] 因为当我用 $group_codes = 'test'; 替换它时(仅用于调试目的),代码按预期工作。
最佳答案
您需要使用事件委托(delegate)来使您新创建的元素正常运行:
$("#group-list").on("click", ".view-group-btns", function() {
alert("check");
});
关于php - jQuery 不适用于 jQuery 创建的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16116173/
我是一名优秀的程序员,十分优秀!