.单击“不为动态加载的表单工作”
.click not working for dynamically loaded form
我有一个表单,它显示当前存储在数据库中的图像。检索文件路径后,它将与"Delete"<button>
一起动态加载到表单中,这将允许用户通过AJAX调用删除图像。
我目前能够成功加载图像和按钮,但按钮不会在单击时调用ajax函数。
我正在父容器上使用.on('click')
,但它仍然不起作用。
jQuery Code(Extract):
$('#ItemDetailsContainer').on('change',function(){
// Deletes Existing pics
$('#ImageDelete1').on('click',function(){
DeleteImage1();
});
});
AJAX函数的代码:
function DeleteImage1() {
var itemid=$('#ImageDeleteItemID2').val();
var filepath=$('#ImageDeleteFilePath2').val();
$.ajax({
url:"deleteitempic.php",
type:"POST",
data:"ItemID="+itemid+"&FilePath="+filepath,
success:function(){
alert("Image successfully deleted.");
},
error:function(){
alert("Image could not be deleted due to an error.");
}
});
};
HTML(摘录):
<form id='BizEditItem' name='BizEditItemDetails' method='post' action='edititemprocess.php' enctype='multipart/form-data' novalidate='novalidate'>
<div class='BizEditItemDetail'>
<label for='BizEditItemCat'>Category:</label>
<select class='BizEditItemInput' id='BizEditItemCat' name='BizEditItemCat'></select>
<span></span>
</div>
<div class='BizEditItemDetail'>
<label for='BizEditItemSubCat'>SubCategory:</label>
<select class='BizEditItemInput' id='BizEditItemSubCat' name='BizEditItemSubCat'></select>
<span></span>
</div>
<div class='BizEditItemDetail'>
<label for='BizEditItemOld'>Item:</label>
<select class='BizEditItemInput' id='BizEditItemOld' name='BizEditItemOld'></select>
<span></span>
</div>
<div id='ItemDetailsContainer'>
</div>
</form>
动态加载部件(摘录):
echo"<div class='BizAddItemDetails' >";
//Counter variable to track images displayed
$imgdisplayed=1;
while($getimage=$fetchimg->fetch(PDO::FETCH_ASSOC)) {
$filepath=$getimage['FilePath'];
echo"<label for='BizEditItemFile1'>Upload Image      (Max Size:2MB)</label>";
echo"<input type='file' class='BizEditItemInput' id='BizEditItemFile$imgdisplayed' name='BizEditItemFiles[]' />";
echo"<span></span>";
echo"<br>";
echo"<img id='"ImagePreview$imgdisplayed'" name='"ImagePreview$imgdisplayed'" class='ImagePreview' src='"$filepath'" > ";
echo"<input type='hidden' name='"ImageDeleteItemID$imgdisplayed'" value='"$itemid'">";
echo"<input type='hidden' name='"ImageDeleteFilePath$imgdisplayed'" value='"$filepath'" >";
echo"<input type='button' id='"ImageDelete$imgdisplayed'" name='"ImageDelete$imgdisplayed'" class='ImageDeleteButton' value='Delete Picture'>";
echo"name='"ImageDelete$imgdisplayed'"";
$imgdisplayed++;
}
while($imgdisplayed<=3) {
echo"<label for='BizEditItemFile1'>Upload Image</label>";
echo"<input type='file' class='BizEditItemInput' id='BizEditItemFile$imgdisplayed' name='BizEditItemFiles[]' />";
echo"<span></span>";
echo"<br>";
echo"<img id='"ImagePreview$imgdisplayed'" name='"ImagePreview$imgdisplayed'" class='EmptyImagePreview' > ";
echo"<br>";
$imgdisplayed++;
}
echo"</div>";
尝试过的事情:
我试过使用
$('#ImageDelete1').click(function(){
DeleteImage1();
});
相反,以及将AJAX调用更改为一个简单的警报,但什么都不起作用。
在服务器错误日志和chrome控制台中也没有任何错误。
任何见解都将不胜感激。
似乎需要绑定到文档,而不是单个元素:
$(document).on('click', '#ImageDelete1',function(){
DeleteImage1();
});
这只是最重要的问题;您的系统可能存在潜在问题。使用Ajax时委托之所以重要,是因为当您更新DOM(删除绑定元素)时,Javascript会失去它在原始对象上的"绑定",从而阻止它执行所需的更新。从文档委派修复了此
我已经多次遇到这个问题。
创建图像后,在while循环中添加单击事件。
echo "<script>$('#ImageDelete1').click(function(){ DeleteImage1(); });</scipt>";
希望这能有所帮助。
相关文章:
- 如何防止回车键提交表单,但仍然允许回车工作
- JavaScript表单验证-“;“错误”;不按需要工作
- 谷歌表单-根据分配给谷歌应用程序的工作为商业用户预先填充多项选择列表
- 当阻止Enter键提交AJAX表单时,关注下一个输入是't工作
- jQuery preventdefault提交表单没有'通过js函数提交表单时无法工作
- 使用一个Javascript函数提交多个表单可以在FF中工作,而不需要其他浏览器
- Ajax表单数据phpPOST不工作
- 表单验证工作不正常,在不检查条目的情况下继续
- JavaScript表单返回,但无法正常工作
- 如何使setTimeout脚本在html表单中正常工作
- 表单验证在接近尾声时停止工作
- 为什么不是'当试图使用Ajax和外部PHP文件发布内容时,我的表单工作不正常,该文件接收两个字符串
- html5表单工作不正常
- .单击“不为动态加载的表单工作”
- 提交表单工作不正常
- 使jquery函数跨多个表单工作.(将Jquery设为DRY)
- 不能让JS表单工作
- HTML表单工作不正常
- 在禁用javascript的情况下使注册表单工作
- 我如何在谷歌表单脚本编辑器中设置var主题,以返回表单/工作表中指定字段的值