我试图创建一个允许用户通过新窗口编辑输入的表单。 PHP将处理输入，然后用新值附加新输入。显然，当我尝试编辑附加的输入时，JavaScript不会触发。请告诉我我做错了什么。 这是我的html代码：
I'm trying to create a form that allows user to edit the input through new window. PHP will process the input then append the new input with the new values. Apparently, when I try to edit the appended input, the JavaScript just won't fire. Please enlighten me on what I did wrong. This is my html code:
<html> <head> <script src="ajax.googleapis/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代码：
And this is my php code:
<?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中。许多人使用文档作为捕捉冒泡事件的地方，但是没有必要把它放在DOM树的最高处。理想的情况是你应该委托给页面加载时最近的父母。
jQuery is only aware of the elements in the page at the time that it runs, so new elements added to the DOM are unrecognized by jQuery. To combat that use event delegation, bubbling events from newly added items up to a point in the DOM that was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally you should delegate to the nearest parent that exists at the time of page load.
您可能需要更改事件处理程序，以便他们使用 （） 方法。
You will likely want to change event handlers so they use the on() method.
更多推荐
追加后JavaScript不会触发
发布评论