从AJAX调用附加元素是不可访问 [英] Elements appended from AJAX call aren't accessible
问题描述
我从PHP文件作为成功的Ajax调用的结果插入的元素。但由于某些原因，一切都在它的时候我看网页的我的源$ C $ C失踪。它正确地显示在页面上，但它无法点击或任何东西，直到我刷新我的网页！我怎样才能让元素成功的Ajax调用后马上可以使用？
I insert element from the php file as a result of successful ajax call. But for some reason that and everything in it is missing when I look at my source code of the page. It appears on the page correctly but it isn't clickable or anything until I refresh my page! How can I make elements usable right after successful AJAX call?
jQuery的AJAX：
Jquery AJAX:
$( "#addvideo" ).click(function() {
$.ajax({
type: "POST",
datatype: 'json',
url: "/public/index.php/admin/content/athletes/addvideo",
data: { youtube: $("input[name=youtube]").val(), vid:$("input[name=athletes_vid]").val(), ci_csrf_token: $("input[name=ci_csrf_token]").val() }
})
.done(function( data ) {
$('#youtubeholder').last().append(data);
});
});
此调用追加以下数据从PHP控制器：
This call appends following data from php controller:
$jquery_data = "<div style='float: left; width: 200px; height: 200px' id='video_pic'>
<img id='".$id."' src='".img_path().$tb_data->filename."' /><br/>
<div class='btn deletevid' style='width: 145px; margin-left: auto; margin-right: auto;'>DELETE</div>
</div>";
echo $jquery_data;
到＆lt;保证同一页的AJAX调用对; DIV ID =youtubeholder＆GT。然而nothign发生在我点击删除按钮。
To the <div id="youtubeholder"> on the same page as AJAX call. However nothign happens when I click the "DELETE" button.
推荐答案
查看源代码在浏览器只显示了原本在页面的HTML作为最初从服务器上下载。这并不表明是动态或以编程方式添加到页面内容。
View Source in the browser only shows what was originally in the HTML of the page as originally downloaded from the server. It does not show content that was dynamically or programmatically added to the page.
。在Chrome中，你可以用鼠标右键单击，选择检查元素，单击元素选项卡上，看到整个DOM hieararchy（您可能需要展开你想看到的部分）。
If you want to see the current content of the DOM, then use a DOM inspector as is built into nearly all browsers now. In Chrome, you can right-click, select "Inspect Element", click on the "Elements" tab and see the entire DOM hieararchy (you may need to expand the parts you want to see).
当你说无法点击，这是不完全清楚你的意思。如果你的意思是你的点击处理程序不绑定到被动态添加到页面中的元素，这很可能是预期的，因为你可能进行了一些code，它是这样的：
When you say "isn't clickable", it isn't entirely clear what you mean. If you mean that your click handlers are not bound to the elements that were dynamically added to the page, that is likely to be expected because you probably ran some code that looks like this:
$(some selector).click(function() {
// code here
});
这code单击处理程序仅绑定到，在那一刻存在的，并不代表未来的元素，可能匹配选择的元素。
That code binds click handlers ONLY to the elements that exist at that moment, not to future elements that might match the selector.
您可以变通这一问题，以下几种方法之一：
You can work-around that issue in one of several ways:
- 您可以手动事件绑定到新添加的元素。
- 您可以使用委派事件处理（而不是静态的事件处理），将工作与动态地添加元素。
动态事件处理jQuery的工作原理是这样的：
Dynamic event handling in jQuery works like this:
$(some static parent selector).on("click", "selector that matches dynamic elements", fn);
例如，这将与在 #youtubeholder DIV有一个选择匹配的动态添加的项目 .deletevid ：
For example, this will work with dynamically added items in the #youtubeholder div that have a selector matching .deletevid:
$("#youtubeholder").on("click", ".deletevid", function() {
// delete element here
});
这篇关于从AJAX调用附加元素是不可访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
