问题:如下代码js中动态创建的元素实现不了点击事件:
//画面属性下的网格线
var showMoreImg = document.createElement('img');
showMoreImg.className = "content_one";
showMoreImg.setAttribute('border', '0');
showMoreImg.setAttribute('src', "images/jianhao.png");
showMoreImg.setAttribute('class', "img_tony");
showMoreImg.className="img_tony";
showMoreImg.setAttribute('title', mxResources.get('hide'));
showMoreImg.style.position = 'absolute';
showMoreImg.style.display = 'block';
showMoreImg.style.left = '0px';
showMoreImg.style.top = '4px';
showMoreImg.style.cursor = 'pointer';
showMoreImg.style.marginTop = '10px';
// showMoreImg.style.marginRight = '17px';
showMoreImg.style.border = '1px solid transparent';
showMoreImg.style.padding = '1px';
showMoreImg.style.opacity = 0.5;
div.appendChild(showMoreImg);
div.appendChild(this.createTitle(mxResources.get('generalpicture')));
$(function() {
$('.img_tony').after('<img src="images/imgno.png" class="img_serry"/>');
});
$('.img_tony').on("click", function() {
// debugger
var pg_content = $('.content');
console.log(pg_content);
if (pg_content.css("display") == "none") {
pg_content.css("display", "block")
// $('.img_tony').src = "images/jianhao.png";
showMoreImg.setAttribute('src', "images/jianhao.png");
} else {
pg_content.css("display", "none")
// $('.img_tony').src = "images/jiahao.png";
showMoreImg.setAttribute('src', "images/jiahao.png");
}
})
//普通画面的样式
this.addProjectCommonPanel(div)
解决:
//画面属性下的网格线
var showMoreImg = document.createElement('img');
showMoreImg.className = "content_one";
showMoreImg.setAttribute('border', '0');
showMoreImg.setAttribute('src', "images/jianhao.png");
showMoreImg.setAttribute('class', "img_tony");
showMoreImg.className="img_tony";
showMoreImg.setAttribute('title', mxResources.get('hide'));
showMoreImg.style.position = 'absolute';
showMoreImg.style.display = 'block';
showMoreImg.style.left = '0px';
showMoreImg.style.top = '4px';
showMoreImg.style.cursor = 'pointer';
showMoreImg.style.marginTop = '10px';
// showMoreImg.style.marginRight = '17px';
showMoreImg.style.border = '1px solid transparent';
showMoreImg.style.padding = '1px';
showMoreImg.style.opacity = 0.5;
div.appendChild(showMoreImg);
div.appendChild(this.createTitle(mxResources.get('generalpicture')));
$(function() {
$('.img_tony').after('<img src="images/imgno.png" class="img_serry"/>');
});
$(document).on("click",'img_tony', function() {
// debugger
var pg_content = $('.content');
console.log(pg_content);
if (pg_content.css("display") == "none") {
pg_content.css("display", "block")
// $('.img_tony').src = "images/jianhao.png";
showMoreImg.setAttribute('src', "images/jianhao.png");
} else {
pg_content.css("display", "none")
// $('.img_tony').src = "images/jiahao.png";
showMoreImg.setAttribute('src', "images/jiahao.png");
}
})
//普通画面的样式
this.addProjectCommonPanel(div)
动态渲染的不能直接$(".class").click,这样是捕获不到元素的
考虑问题还是不全,实在不清楚的时候多去查查文档