Lis*_*isa 2 html javascript php jquery
我正在尝试创建一个允许用户通过新窗口编辑输入的表单.PHP将处理输入,然后使用新值附加新输入.显然,当我尝试编辑附加的输入时,JavaScript就不会触发.请告诉我我做错了什么.这是我的HTML代码:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.races').click(function(e){
console.log("Inside Testing");
e.preventDefault();
var currID = this.id;
var content = '<form id="theForm" action="ct.php" method="post"> Race: <input type="text" id="race" name="race"><button type="submit" onClick="OKClicked()">Click this!</button></form>';
childWin = window.open('', "_blank", "height=400, width=550, status=yes, toolbar=no, menubar=no, location=no,addressbar=no");
toBeAdded = $(this).closest('div');
childWin.document.close();
childWin.document.write(content);
popupRace = childWin.document.getElementById("race");
parentRace = document.getElementById(currID);
transferValues();
})
});
function transferValues()
{
popupRace.value = parentRace.value;
}
function setValue(text)
{
childWin.close();
toBeAdded.parent().append(text);
toBeAdded.remove();
}
</script>
</head>
<body>
<div>
Name: <input type="text" name="name">
</div>
<div>
<div>
<input type="hidden" name="race-0" value="Human" id="race-0">
<span>race: Human</span>
<a href="javascript:void(0)" class="races" id="race-0">Edit</a>
</div>
</div>
<div>
Name: <input type="text" name="name">
</div>
<div>
<div>
<input type="hidden" name="race-1" value="God" id="race-1">
<span>race: God</span>
<a href="javascript:void(0)" class="races" id="race-1">Edit</a>
</div>
</div>
</body>
</html>
这是我的PHP代码:
<?php
$postDataKey = array_keys($_POST);
$text = "";
foreach ( $postDataKey as $currPostKey )
{
$currValue = $_POST[$currPostKey];
$text .= '<div><input type="hidden" name="'.$currPostKey.'-1" value="'.$currValue.'" id="'.$currPostKey.'-1"><span>'.$currPostKey.': '.$currValue.'</span> <a href="javascript:void(0)" class="races" id="race-1">Edit</a></div>';
}
echo
'
<html>
<head>
<script>
window.opener.setValue(\''.$text.'\');
</script>
</head>
</html>
'
;
?>
jQuery在运行时只知道页面中的元素,因此添加到DOM的新元素无法被jQuery识别.为了解决这种使用事件委托问题,将新添加的项目中的事件冒泡到jQuery在页面加载时运行时在DOM中的某个点.许多人使用它document作为捕捉起泡事件的地方,但没有必要在DOM树上走得那么高.理想情况下,您应该委托给页面加载时存在的最近的父级.
您可能希望更改事件处理程序,以便他们使用该on()方法.