标签: dynamic-html
添加了AngularJS点击事件的动态内容无法处理添加的内容
我本周刚开始使用AngularJS进行一个新项目,我必须尽快加快速度.
我的一个要求是动态添加html内容,并且内容可能有一个click事件.
因此,我在下面的代码Angular代码显示一个按钮,当单击它时,它会动态添加另一个按钮.单击动态添加的按钮,应该添加另一个按钮,但我无法使用ng-click处理动态添加的按钮
<button type="button" id="btn1" ng-click="addButton()">Click Me</button>
工作代码示例在这里 http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.addButton = function() {
alert("button clicked");
var btnhtml = '<button type="button" ng-click="addButton()">Click Me</button>';
angular.element(document.getElementById('foo')).append((btnhtml));
}
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div id="foo">
<button type="button" id="btn1" ng-click="addButton()">Click Me
</button>
</div>
</body>
</html> …推荐指数
解决办法
查看次数
如何在javascript中将样式属性重置为CSS默认值？
在php生成的页面上有几个这样的元素:
<td class="defaultTDStyle" style="color:userDefinedCustomColor" id="myTDId"></td>
所以有一个默认样式,我应用了几个额外的样式,覆盖CSS中定义的样式.
有没有办法从JavaScript中删除这些添加的样式？似乎obj.style.color ="default"和obj.style.color ="auto"不起作用.如何从javascript将颜色重置为CSS默认值？
推荐指数
解决办法
查看次数
我删除元素时是否需要在jQuery中分离事件
我有一个使用动态标签的UI,因此可以将内容加载到选项卡中,然后可以关闭标签并从页面中删除内容.
当我将内容加载到选项卡时,我使用jQuery将大量事件附加到元素.
当我从页面中删除这些元素时会发生什么？jQuery需要知道吗？
另外,如果我多次附加一个事件,这有关系吗？例如,在我的标签加载中,我可能使用类选择器附加事件$('.submitButton').click(...).但是我可能已经打开了其他选项卡,这些选项卡已经附加了submitButton事件.在这种情况下,我将重新附加相同的事件.这有什么问题吗？
推荐指数
解决办法
查看次数
如何使用.NET的WebBrowser或mshtml.HTMLDocument动态生成HTML代码？
我读过的关于这个主题的大多数答案都指向System.Windows.Forms.WebBrowser类或来自Microsoft HTML Object Library程序集的COM接口mshtml.HTMLDocument.
WebBrowser类没有引导我到任何地方.以下代码无法检索由我的Web浏览器呈现的HTML代码:
[STAThread]
public static void Main()
{
WebBrowser wb = new WebBrowser();
wb.Navigate("https://www.google.com/#q=where+am+i");
wb.DocumentCompleted += delegate(object sender, WebBrowserDocumentCompletedEventArgs e)
{
mshtml.IHTMLDocument2 doc = (mshtml.IHTMLDocument2)wb.Document.DomDocument;
foreach (IHTMLElement element in doc.all)
{
System.Diagnostics.Debug.WriteLine(element.outerHTML);
}
};
Form f = new Form();
f.Controls.Add(wb);
Application.Run(f);
}
以上只是一个例子.我真的不想找到一个解决方法来找出我所在城镇的名称.我只需要了解如何以编程方式检索那种动态生成的数据.
(调用新的System.Net.WebClient.DownloadString(" https://www.google.com/#q=where+am+i "),将生成的文本保存到某处,搜索您当前所在城镇的名称找到了,如果你能找到它,请告诉我.)
但是,当我从我的网络浏览器(即或Firefox)访问" https://www.google.com/#q=where+am+i "时,我会在网页上看到我的城镇名称.在Firefox中,如果我右键单击城镇名称并选择"Inspect Element(Q)",我会清楚地看到用HTML代码编写的城镇名称,这看起来与WebClient返回的原始HTML完全不同.
在我厌倦了玩System.Net.WebBrowser后,我决定给mshtml.HTMLDocument一个镜头,最后得到同样无用的原始HTML:
public static void Main()
{
mshtml.IHTMLDocument2 doc = (mshtml.IHTMLDocument2)new mshtml.HTMLDocument();
doc.write(new System.Net.WebClient().DownloadString("https://www.google.com/#q=where+am+i"));
foreach (IHTMLElement e in doc.all)
{
System.Diagnostics.Debug.WriteLine(e.outerHTML);
}
}
我想必须有一种优雅的方式来获取这种信息.现在,我能想到的是将一个WebBrowser控件添加到表单中,让它导航到相关的URL,发送键"CLRL,A",并将页面上显示的任何内容复制到剪贴板并尝试解析它.不过,这是一个可怕的解决方案.
推荐指数
解决办法
查看次数
统一的HTML模板语言
推荐指数
解决办法
查看次数
jquery-mobile创建动态控制组并应用jquery-ui css
这是我的代码:http: //jsfiddle.net/YKvR3/34/
我将创建一个控件组,其值在我的数组(名称)中.问题是,当我点击Load按钮在controlgroup添加值,但jQuery的UI风格不加载类的形象.控制组未使用jquery-ui mobile css进行样式设置.
$("#load").click(function(){
var name=["one","two"];
var html='<fieldset id="listPlayers" data-role="controlgroup"><legend><h1>Choose as many players as youd like to remove:</h1></legend>';
for ( var int = 0; int < 2; int++) {
html+='<input type="checkbox" name="checkbox-'+int+'a" id="checkbox-'+int+'a" class="custom" /><label for="checkbox-'+int+'a">'+name[int]+'</label>';
}
alert('<legend><h3>Choose as many players as you would like to remove:</h3></legend>'+html+'</fieldset');
$("#list").html(html+'</fieldset');
//$("#list").page();});?
我做错了什么？谢谢.
推荐指数
解决办法
查看次数
从jquery数组对象php设置值？
我通过ajax获取特定的产品项列表,方法是将它们的唯一ID传递给服务器.现在每个产品都有自己的一组属性,我必须在页面上显示产品图像.当我通过jquery设置值时,只打印了数组中的最后一个值.以下是我的编码文件.
images.php
while($fetch = mysql_fetch_array($result))
{
?>
<div class="col-sm-4">
<div class="thumbnail">
<a class="productitemid" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>"><img class="img-responsive productimage" src="uploadedfiles\<?php echo $fetch['imageURL'];?>" alt="<?php echo $fetch['imageURL'];?>" /></a>
<div class="text-center productitemname" style="font-weight:bold;"><?php echo $fetch['itemName']; ?></div>
<div class="badge col-sm-offset-1 productprice"><?php echo $fetch['price']; ?></div>
<span class="col-md-offset-7"><a class="productitemid btn btn-success" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>">BUY</a></span>
</div>
</div>
<?php
}
js文件
$(document).ready(function(){
$('.menProdCatgry').on('click',function(){
$.ajax({
type: "post",
url: "getselectedproducts.php",
data:{
"prodId" : $('.menProdCatgry').attr('prodCatId')
},
dataType: "json",
success: function(data){
console.log(data);
$.each(data, function(){
var getprodId = this.prodId;
var getimageURL = this.imageURL;
var …推荐指数
解决办法
查看次数
使用typescript使用模板创建HTML
尝试打字稿,我想实现以下目标:
从服务器获取问题文本和数字,并使用typescript在某个地方的DOM中显示它.
目前我有以下.ts文件:
class QuestionResponse {
constructor(public questionText, public questionNumber) {
}
}
function questioner(question: QuestionResponse) {
return '<div data-val-id="${QuestionNumber}"> ${QuestionText} </div>';
}
var testQuestion = new QuestionResponse("Question text number 5", 5);
//this will be replaced by .innerHTML of some element:
alert(questioner(testQuestion));
这不会将$ {QuestionNumber}替换为question.QuestionNumber ...也不会替换Text.我不想使用字符串附加,我想使用干净的html,最好是在单独的.html文件中.
基本上我在问:是否有可能使用打字稿,如果是的话,怎么样？如果没有,使用angularjs实现这一目标的最佳实践方法是什么？(但仍使用打字稿)
推荐指数
解决办法
查看次数
动态ajax表单选择框自动填充
我正在努力制作一个带有动态字段的 PHP 表单，并在 JQuery 中自动填充其他字段，到目前为止我可以添加新字段并且自动填充工作得很好，但仅适用于第一个字段。
自动填充下拉菜单仅出现在第一个输入中。如何使所有动态表单输入与自动填充一起使用？例如我有 2 个字段。动态形式的 Items_name 和 Total_stock。如果我选择 Items_name，我想。自动填充字段 total_stock。
这是我的 ajax 代码：
<script language="javascript">
function AddMasterDetail() {
var idf = document.getElementById("idf").value;
stre="<div class='form-group' id='srow" + idf + "'><div class='controls'>";
stre=stre+" <div class='col-xs-2'>";
stre=stre+"<select placeholder='Items Name' class='form-control input-sm' name='items_id[]' id='items_id' onchange='return autofill();'>"
+"<option value='' disabled selected>Please Select</option>"
+"<?php foreach($v_items_stock as $row){ echo "<option value='$row->items_id'>$row->items_name</option>"; } ?></select>";
stre=stre+"</div>";
stre=stre+"<div class='col-xs-2'>";
stre=stre+"<input class='form-control input-sm' id='total_stock' placeholder='Total Stock' name='total_stock[]' />";
stre=stre+"</div>";
stre=stre+"<div class='col-xs-1'> <button type='button' class='btn btn-danger btn-sm' title='Hapus Rincian …推荐指数
解决办法
查看次数
Live()关键字无法使用动态html图像加载
我将图像动态添加到页面中,我似乎无法使用live()动态地使用'load'事件.
这是我目前的代码:
$('#largeImg' + nextUniqueItemID).hide();
$('#largeImg' + nextUniqueItemID).live('load' , function() {
$('#loader' + nextUniqueItemID).hide();
$('#largeImg' + nextUniqueItemID).show();
});
同'#largeImg' + nextUniqueItemID之处在于加入到页面早些时候功能的图像和'#largeImg' + nextUniqueItemID被加载图像.
我觉得好像我可能会滥用"直播",因为它不需要听众,而是立即触发事件.
感谢你的帮助.我试过"绑定"而且从未触发过.我也尝试消除负载,但这不起作用.有没有办法将一个监听器附加到一个事件,指示图像何时加载？
推荐指数
解决办法
查看次数
当我使用动态html两次applyBindings时,Knockout会变得疯狂
我正在创建一个带有淘汰赛的单页应用程序...
我有一个GlobalViewModel来管理所有动态页面(我通过ajax获取html).
这是我的问题的一个例子:
当我加载相同模板2次(在"显示模板"中单击2次)时,敲门声变得疯狂并重复数据......如果检查可观察数组,则没有重复数据.
HTML:
<div id="container">
<button data-bind="click: showView">show template</button>
<div data-bind="html: templateHtml"></div>
</div>
脚本:
function GlobalViewModel(){
var self = this;
self.templateHtml = ko.observable();
self.templateVM = ko.observable();
self.showView = function(){
//i get this html from ajax
var pageHtml = "<div id='template' data-bind='with: templateVM'>"+
"<button data-bind='click: showAll'>All</button>" +
"<button data-bind='click: showNames'>Names</button>" +
"<button data-bind='click: showLastNames'>LastNames</button>" +
"<button data-bind='click: showNickNames'>NickNames</button>" +
"<ul data-bind='foreach: resultsToShow'>" +
" <li data-bind='text: $data'></li>" +
"</ul>" +
"</div>";
self.templateHtml(pageHtml)
self.templateVM(new ViewModel())
ko.cleanNode(document.getElementById("template"))
ko.applyBindings(window.gvm, document.getElementById("template"));
} …推荐指数
解决办法
查看次数
如何使用 html 和 javascript 创建复制按钮？
Hii 是 javascript 新手，但通过我的全部努力，我编写了一个 javascript 来复制<p></p>元素内的文本。在我的网站中，我多次需要复制按钮。但我的 javascript 仅适用于一个复制按钮。如果我将它用于另一个复制按钮，它将复制第一个按钮的相应<p>/p>文本。我的 JavaScript
const copyButton = document.querySelector('.copyButton');
const copyalert = document.querySelector('.copyalert');
copyButton.addEventListener('click', copyClipboard);
function copyClipboard() {
var copystatus= document.getElementById("randomstatus");
// for Internet Explorer
if(document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(copystatus);
range.select();
document.execCommand("Copy");
window.getSelection().removeAllRanges();
copyalert.classList.add("show");
setTimeout(function() {copyalert.classList.remove("show")},700);
}
else if(window.getSelection) {
// other browsers
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(copystatus);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("Copy");
window.getSelection().removeAllRanges();
copyalert.classList.add("show");
setTimeout(function() {copyalert.classList.remove("show")},700);
}
}
我的网页
<div>
<h2 class="statusheading">Latest English quotes</h2>
<div id="englishquotes">
<div …推荐指数
解决办法
查看次数
如果没有找到，有没有办法告诉反应动态创建 div
刚开始反应，我想知道是否有任何解决方法可以克服此错误：
_registerComponent(...): Target container is not a DOM element.
编辑我想做的是：
我有一个反应功能，如：
ReactDOM.render(React.createElement(someFunction,{data:someData}),document.getElementById('someID')
这会产生一个dom喜欢：
<span>
<ul data-reactid='...'>blahhh</ul>
<div data-reactid='...'>
<div id='some-id1' data-reactid='...'>blahhh</div>
<div id='some-id2'data-reactid='...'>blahhhh</div>
</div>
</span>
现在在上一个 react 调用的下一行，我有其他函数试图用上面创建的 div 做一些事情：
ReactDOM.render(React.createElement(someOtherReactFunction, { somePram: 'ImParam'}), document.getElementById('some-id1'));
这给了我：
_registerComponent(...): Target container is not a DOM element.
但我可以看到它存在于 DOM 中
那么如何访问这个虚拟 domdiv呢？并在其中加载一些内容？
PS：我知道一种方法，dangerouslySetInnerHtml但正在寻找一种更好的方法
推荐指数
解决办法
查看次数
标签 统计
dynamic-html ×13
html ×5
javascript ×5
jquery ×5
dom ×3
angularjs ×2
css ×2
ajax ×1
arrays ×1
c# ×1
fieldset ×1
knockout.js ×1
load ×1
php ×1
reactjs ×1
templating ×1
typescript ×1
virtual-dom ×1