<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("h2").html("<p class='test'>click me</p>")
});
$(".test").click(function(){
alert();
});
});
</script>
</head>
<body>
<h2></h2>
<button>generate new element</button>
</body>
</html>
我试图生成类名称的新标签test中<h2>单击按钮.我还定义了一个与之关联的点击事件test.但事件不起作用.
有人可以帮忙吗？
我正在尝试将html数据动态插入到动态创建的列表中,但是当我尝试为动态创建的按钮附加onclick事件时,事件不会触发.解决方案将非常感激.
Javascript代码:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('btnSubmit').addEventListener('click', function () {
var name = document.getElementById('txtName').value;
var mobile = document.getElementById('txtMobile').value;
var html = '<ul>';
for (i = 0; i < 5; i++) {
html = html + '<li>' + name + i + '</li>';
}
html = html + '</ul>';
html = html + '<input type="button" value="prepend" id="btnPrepend" />';
document.getElementsByTagName('form')[0].insertAdjacentHTML('afterend', html);
});
document.getElementById('btnPrepend').addEventListener('click', function () {
var html = '<li>Prepending data</li>';
document.getElementsByTagName('ul')[0].insertAdjacentHTML('afterbegin', html);
});
});
HTML代码:
<form>
<div class="control">
<label>Name</label>
<input id="txtName" …对于cakephp项目中的图像上传,我使用了java-script.I在app\View\Layouts中添加了这个js文件default.ctp
js代码
document.querySelector('input[type=file]').addEventListener('change', function(event){
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
if (files[i].type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
var imageElement = document.createElement('div');
imageElement.classList.add('uploading');
imageElement.innerHTML = '<span class="progress"><span></span></span>';
var progressElement = imageElement.querySelector('span.progress span');
progressElement.style.width = 0;
document.querySelector('form div.photos').appendChild(imageElement);
var canvas = document.createElement('canvas'),
max_size = 1200,
width = image.width,
height = image.height;
if (width > height) {
if (width …这是 JSFiddle 示例： https: //jsfiddle.net/1a6j4es1/1/
$('table').on('click', 'td', function() {
$(this).css('background', 'green');
});
如何用纯 JavaScript 重写这段代码？即使对于元素内的新元素，
回调函数也应该起作用。tdtable
更新：我找到了一个非常简短且干净的解决方案：https ://jsfiddle.net/1a6j4es1/28/
function delegateSelector(selector, event, childSelector, handler) {
var is = function(el, selector) {
return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
};
var elements = document.querySelectorAll(selector);
[].forEach.call(elements, function(el, i){
el.addEventListener(event, function(e) {
if (is(e.target, childSelector)) {
handler(e);
}
});
});
}
delegateSelector('table', "click", 'td', function(e) {
e.target.style.backgroundColor = 'green';
});
我正在尝试将jQuery事件处理程序转换为纯javascript.页面上有特定选择器的负载,因此设计时只有一个具有该选择器的事件定位文档:
$(document).on("click", selectorString, function(event) {
// do stuff
});
selector选择器列表在哪里作为字符串" .one, .two, .three".
我很难在没有jQuery的情况下复制这个:
document.addEventListener("click", function(event){
if (elementHasClass(event.target, selectorString) {
// do stuff
}
});
但是,这并不具有所期望的行为,作为听者只有在document元素,而不是所选元素中的文档.有人能帮忙吗？
我正在尝试在Backbone事件(View)中单击时获取div的data属性.
如果我单击div,我能够实现这一点,listItem但如果我要点击子元素跨度,它将失败,因为$(e.target)它将是跨度.
那么,即使单击子元素,如何获取父元素的data属性？
<div class="listItem" data-showInfo="true">
<span class="arrow"></span>
</div>
events:{
"click .listItem": function(e) {
var $listItem= $(e.target);
console.log($listItem.data('showInfo'));
}
}
我在事件委托方面遇到了一个奇怪的情况，原因是元素被动态添加到 DOM 中。单击按钮打开模式
为了快速解释此代码，有一个用于桌面和移动设备的模态抽屉，并且此处都选择了两者，并且单击事件附加到两个模态内的颜色样本。模态框通过 js 动态添加到 DOM
现在让我困惑的部分是 currentTarget 是文档，如果我使用 e.target，这将是首先单击以打开模式的按钮。
为了打开模态，必须单击按钮，因此通过事件委托，currentTarget是文档，目标是按钮本身，所以我真的不知道如何将事件监听器附加到模态中的.swatch 。
$(document).on('click', '.modal-desk__content .swatch, .modal-mobile__content .swatch', e => {
const $swatch = $(e.currentTarget);
$('.product-form').find('.swatch[data-value="' + $swatch.data('value') + '"]').click();
$swatch.closest('.swatches').find('.swatch').removeClass('selected');
$swatch.addClass('selected');
})