Javascript 通过jQuery处理具有动态HTML元素ID的多个表单
我的php页面会根据通过第三方api接收的数据生成多个表单 我的要求是为这些动态生成的表单元素处理jQuery模式确认，但我不知所措，因为在我的情况下jQuery无法处理这个问题 我也尝试过JSFIDLE，但无法使其工作 编辑：脚本没有太大问题，但fiddle添加了windo onLoad，这会干扰脚本：Javascript 通过jQuery处理具有动态HTML元素ID的多个表单,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我的php页面会根据通过第三方api接收的数据生成多个表单 我的要求是为这些动态生成的表单元素处理jQuery模式确认，但我不知所措，因为在我的情况下jQuery无法处理这个问题 我也尝试过JSFIDLE，但无法使其工作 编辑：脚本没有太大问题，但fiddle添加了windo onLoad，这会干扰脚本： window.onload=function(){ function formSubmit(formId) { alert('here'); var submitForm =
window.onload=function(){
function formSubmit(formId) {
alert('here');
var submitForm = $('#form_twake' + formId);
...
<script>
function formSubmit(id) {
var submitForm = $('#form_twake'+id);
submit = false;
$('#confirm'+id).dialog({
resizable: false,
height: 140,
modal: true,
autoOpen: false,
buttons: {
'Submit': function() {
$(this).dialog('close');
submit = true;
submitForm.submit();
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
//$("#confirm").parent().appendTo($("#form_twake"));
submitForm.submit(function() {
if (submit) {
return true;
} else {
$("#confirm"+id).dialog('open');
return false;
}
});
};
</script>
功能表单提交（id）{
var submitForm=$（“#form_twake”+id）；
提交=错误；
$（'#确认'+id）.对话框({
可调整大小：false，
身高：140，
莫代尔：是的，
自动打开：错误，
按钮：{
“提交”：函数（）{
$（this.dialog（'close'）；
提交=真；
submitForm.submit（）；
},
“取消”：函数（）{
$（this.dialog（'close'）；
}
}
});
//$（“#确认”）.parent（）.appendTo（$（“#表单”）；
submitForm.submit（函数（）{
如果（提交）{
返回true；
}否则{
$（“#确认”+id）.dialog（'open'）；
返回false；
}
});
};
<html>
<body>
<center>
<div><img src="includes/static/logo.png" alt="Twake"/></div>
</br>
<?php
try {
$suffix = 0;
foreach ( $json ['users'] as $bud ) {
$keys = array_keys ( $bud );
$suffix = $suffix + 1;
?>
<form id="form_twake<?php echo $suffix?>" name="form_twake<?php echo $suffix?>" method="POST" action="index.php" onsubmit="formSubmit(<?php echo $suffix?>)">
<div class="box fade-in one">
<input type="submit" value="Destroy" class="twake-button" />
<div id="confirm<?php echo $suffix?>" style="display: hidden;" title="Bin user?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Confirm cleanup of the user <?php echo $bud ['name'];?>?</p>
</div>
</div>
</form>
<?php
}
}
catch (Exception $e) {
echo 'Please check your connection and try again. ' . $e->getMessage();
}
;
?>
</center>
</body>
</html>
?
submitForm.attr('extraData', false);
$('#confirm'+id).dialog({
resizable: false,
height: 140,
modal: true,
autoOpen: false,
buttons: {
'Submit': function() {
$(this).dialog('close');
submitForm.attr('extraData', true);
submitForm.submit();
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
submitForm.submit(function() {
var submit = $('#submitForm').attr('extraData');
if (submit) {
return true;
} else {
$("#confirm"+id).dialog('open');
return false;
}
$('#confirm'+id).dialog({
resizable: false,
height: 140,
modal: true,
autoOpen: false,
buttons: {
'Submit': function() {
$(this).dialog('close');
DoWork(true);
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
function DoWork (isSubmit) {
if (!isSubmit) $("#confirm"+id).dialog('open');
}
我对它进行了一些修改，将其发布在这里，因为它也可以对其他人有所帮助
<script>
var submitForm = null;
var id = 0;
var submit = false;
function formSubmit(formId) {
id = formId;
submitForm = $('#form_twake'+id)
alert(id);
$('#confirm'+id).dialog({
resizable: false,
height: 140,
modal: true,
autoOpen: false,
buttons: {
'Submit': function() {
$(this).dialog('close');
submit = true;
submitForm.submit();
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
//$("#confirm").parent().appendTo($("#form_twake"));
twakeSubmit(submit);
}
function twakeSubmit(isSubmit) {
if (isSubmit) {
return true;
} else {
$("#confirm"+id).dialog('open');
return false;
}
}
</script>
var submitForm=null；
var-id=0；
var submit=false；
函数formSubmit（formId）{
id=formId；
submitForm=$（“#form_twake”+id）
警报（id）；
$（'#确认'+id）.对话框({
可调整大小：false，
身高：140，
莫代尔：是的，
自动打开：错误，
按钮：{
“提交”：函数（）{
$（this.dialog（'close'）；
提交=真；
submitForm.submit（）；
},
“取消”：函数（）{
$（this.dialog（'close'）；
}
}
});
//$（“#确认”）.parent（）.appendTo（$（“#表单”）；
twakeSubmit（提交）；
}
功能twakeSubmit（isSubmit）{
如果（提交）{
返回true；
}否则{
$（“#确认”+id）.dialog（'open'）；
返回false；
}
}
<html>
<body>
<center>
<div><img src="includes/static/logo.png" alt="Twake"/></div>
</br>
<?php
try {
$suffix = 0;
foreach ( $json ['users'] as $bud ) {
$keys = array_keys ( $bud );
$suffix = $suffix + 1;
?>
<form id="form_twake<?php echo $suffix?>" name="form_twake<?php echo $suffix?>" method="POST" action="index.php">
<div class="box fade-in one">
<input type="button" value="Destroy" class="twake-button" onclick="formSubmit(<?php echo $suffix?>)"/>
<div id="confirm<?php echo $suffix?>" style="display: hidden;" title="Bin user?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Confirm cleanup of the user <?php echo $bud ['name'];?>?</p>
</div>
</div>
</form>
<?php
}
}
catch (Exception $e) {
echo 'Please check your connection and try again. ' . $e->getMessage();
}
;
?>
</center>
</body>
</html>
?