jquery中 如何 使用 append() 方法 新添加的元素? $('#id').html()取不到值?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery中 如何 使用 append() 方法 新添加的元素? $('#id').html()取不到值?相关的知识,希望对你有一定的参考价值。
html:
<div id="con"></div>
jquery:
$("#con").append("<div id='hello'>Hello</div>");
$("#hello").html() ; //这句 没有值,真的没别的办法? 不是#的问题,appendto()也是一样的。取不到
live( type, fn )
jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。
目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。
还不支持 blur, focus, mouseenter, mouseleave, change, submit
与bind()不同的是,live()一次只能绑定一个事件。
这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。
.live()与流行的liveQuery插件很像,但有以下几个主要区别:
.live 目前只支持所有事件的子集,支持列表参考上面的说明。
.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
.live 没有"setup"和"cleanup"的过程。因为所有的事件是委派而不是直接绑定在元素上的。
要移除用live绑定的事件,请用die方法
返回值
jQuery
参数
type (String) : 一个或多个用空格分隔的事件名
fn (Function) : 欲绑定的事件处理函数
示例
点击生成的p依然据有同样的功能。
HTML 代码:
<p>Click me!</p>
jQuery 代码:
$("p").live("click", function()
$(this).after("<p>Another paragraph!</p>");
); 参考技术A jquery是取不到后来添加的dom的。你要绑定事件倒可以用live方法。 参考技术B $("<span>").text("span标记的文本").appendTo($("#demo"))
结果:[<div><a>其它标签</a><span>span标记的文本</span></div>] 参考技术C append(content)
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。
返回值
jQuery
参数
content (String, Element, jQuery) : 要追加到目标中的内容
示例
向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ] 参考技术D .append( content )
一个简单的例子
<!DOCTYPE html>
<html>
<head>
<style>
p background:yellow;
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$("p").append("<strong>Hello</strong>");
</script>
</body>
</html>
=========================================
我本地试了一下,这样可以取到值
<div id="con"></div>
<div id="result"></div>
<script>
$("#con").append("<div id='hello'>Hello</div>");
$("#result").html($("#hello").html());
</script>
你可以看到有两个Hello本回答被提问者和网友采纳
在jquery中附加php
【中文标题】在jquery中附加php【英文标题】:append php in jquery 【发布时间】:2011-03-13 11:22:24 【问题描述】:我正在尝试使用 jquery 动态创建一个 div 来显示错误消息。我可以使用 append() 轻松创建 HTML,但我需要调用 php 变量才能显示内容。如果我像往常一样尝试添加 php 开始和结束标签,则 append 方法不会按预期运行,并从行中间输出一个看似随机的部分。 我该如何克服这个问题?
这是我拥有的 jquery 代码:
$(document).ready(function()
var errors_php = "<?php echo validation_errors('<li>','</li>'); ?>";
$('#wrapper').append("<div id='errors'><ul>"+errors_php+"</ul></div>");
$('#errors').slideDown('slow');
);
注意:validation_errors() 函数是一个codeigniter 方法。顺便说一句,如果我从 append() 中删除 errors_php 变量,它会按预期工作,显示一个空的 div。
编辑:
生成的代码是:
<div id="errors"><ul>',''); ?></ul></div>
【问题讨论】:
还有什么输出到屏幕上? 对不起@wowo_999 我不关注。浏览器正在解析上面生成的代码并按预期显示它(使用一点 css!)。 相关:***.com/questions/168214/… @John Rasch 我刚刚查了这个问题,这正是我想要做的。不幸的是,我从答案中不明白他们是如何解决的。我以前从未使用过 json 数据。我应该把那段代码放在哪里?!?! 页面加载时var errors_php = "<?php echo validation_errors('<li>','</li>'); ?>";
行呈现什么?我的意思是,如果您进入查看源代码并查看该行,您会看到什么?
【参考方案1】:
确保 PHP 的输出正确转义。如果错误代码中有引号 ("),则会导致问题。尝试将 validation_errors
包装为 addslashes
:
$(document).ready(function()
var errors_php = "<?php echo addslashes(validation_errors('<li>','</li>')); ?>";
$('#wrapper').append("<div id='errors'><ul>"+errors_php+"</ul></div>");
$('#errors').slideDown('slow');
);
【讨论】:
我喜欢你的想法,但我只是尝试了一下,得到了相同的输出。错误中不应有任何引号或类似内容。 你能贴出validation_errors
的代码吗?可能有哪些错误示例?
validation_errors() 是一个函数,它是 codeigniter 框架的一部分。它在表单提交后输出预定义的错误消息,例如。必填字段为空等。问题不在这个函数上,它正在研究如何让 jquery 发送浏览器 php。
在 javascript 函数之外,运行以下命令:<?php print_r(validation_errors('<li>','</li>')); ?>
它打印出什么?【参考方案2】:
根据您的评论:
我刚刚查了一下那个问题 这正是我想要做的。 不幸的是,我不明白 他们如何解决的答案。 我以前从未使用过 json 数据。 我应该把那段代码放在哪里?
JSON data 只是 JavaScript 对象表示法,因此如果您将 JavaScript 变量设置为 JSON 值,它实际上会重新创建首先被序列化为 JSON 的对象的副本。
var errors_php = "<?php echo validation_errors('<li>','</li>'); ?>";
应该是:
var errors_php = <?php echo json_encode(validation_errors('<li>','</li>')); ?>;
【讨论】:
【参考方案3】:你不能在 javascript 文件中运行 PHP 代码,但是你可以在 PHP 文件中运行 html&JS 代码。
Javascript 在用户的浏览器中运行。
PHP 在服务器上运行。它读取您的 .php 文件,运行它找到的 PHP,将 HTML 发送到浏览器,然后退出。
不存在允许您从 Javascript 代码中运行 PHP 代码的“远程诡异动作”。
要在 PHP 文件中运行 html&JS 代码,请执行以下操作:
$('.addctr').append(
'<div class="row">' +
'<div class="form-group col-sm-5">' +
'<label class="control-label">Parameter</label>' +
'<select class="form-control" name="asset_search">' +
'<?php foreach ($dd["asset_search"] as $asset_search) ?>' +
'<option <?= set_select("asset_search", $asset_search["text"]) ?>><?= $asset_search["value"] ?></option>' +
'<?php ?>' +
'</select>');
【讨论】:
以上是关于jquery中 如何 使用 append() 方法 新添加的元素? $('#id').html()取不到值?的主要内容,如果未能解决你的问题,请参考以下文章
如何通过 jQuery 的 .append() 添加 DOM 元素(Angular 指令)?