Question

由于成功的ajax调用，我从php文件中插入元素。但是出于某些原因，当我查看页面的源代码时，其中的所有内容都丢失了。它正确显示在页面上但是在我刷新页面之前它不可点击或任何其他内容！如何在成功调用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控制器的data之后：

$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;

与AJAX调用相同的页面上的<div id="youtubeholder">。但是，当我点击＆＃34; DELETE＆＃34;按钮。

Answer 1

浏览器中的“查看源”仅显示最初从服务器下载的页面HTML中最初的内容。它不会显示动态或以编程方式添加到页面的内容。

如果要查看DOM的当前内容，请使用现在几乎所有浏览器内置的DOM检查器。在Chrome中，您可以右键单击，选择＆＃34;检查元素＆＃34;，单击＆＃34;元素＆＃34;选项卡并查看整个DOM hieararchy（您可能需要扩展您想要查看的部分）。

当你说＆＃34;无法点击＆＃34;时，它并不完全清楚你的意思。如果你的意思是你的点击处理程序没有绑定到动态添加到页面的元素，那很可能是因为你可能运行了一些看起来像这样的代码：

$(some selector).click(function() {
    // code here
});

该代码仅将点击处理程序绑定到当时存在的元素，而不是绑定到可能与选择器匹配的未来元素。

您可以通过以下几种方式解决该问题：

您可以手动将事件绑定到新添加的元素。
您可以使用委托事件处理（而不是静态事件处理）来处理动态添加的元素。

jQuery中的动态事件处理如下：

$(some static parent selector).on("click", "selector that matches dynamic elements", fn);

例如，这将适用于#youtubeholder div中具有选择器匹配.deletevid的动态添加项：

$("#youtubeholder").on("click", ".deletevid", function() {
    // delete element here
});

Answer 2

您最有可能将Click事件处理程序绑定到文档就绪的删除div。添加新的div时，click事件处理程序不会自动绑定到新元素。

因此，在更新数据之后，再次绑定事件处理程序，您将会很高兴。

Answer 3

查看jQuery.on()

委派您delete div的点击事件例如 -

$(document).on("click",".btn",function(){//bind click event for all .btn type
alert("clicked");
});

无法访问从AJAX调用追加的元素

3 个答案:

DEMO