附加后JavaScript不会触发
附加后JavaScript不会触发
我正在尝试创建一个允许用户通过新窗口编辑输入的表单。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>
ABOUTYOU浏览 524回答 2
2回答
-
月关宝盒
jQuery在运行时只知道页面中的元素，因此添加到DOM的新元素无法被jQuery识别。为了解决这种使用事件委托问题，将新添加的项目中的事件冒泡到jQuery在页面加载时运行时在DOM中的某个点。许多人使用它document作为捕捉起泡事件的地方，但没有必要在DOM树上走得那么高。理想情况下，您应该委托给页面加载时存在的最近的父级。您可能希望更改事件处理程序，以便他们使用该on()方法。
随时随地看视频慕课网APP
JavaScript
JQuery
PHP