如何在使用javascript的表单元素上添加.click（）事件？

HTML代码：如何在使用javascript的表单元素上添加.click（）事件？

<body> 
    <select multiple="multiple" id="imglist" class="image-picker show-html"> 
    <option><a href="http://placekitten.com/220/200" target="_blank">Cute Kitten 1</a></option> 
    <option><a href="http://placekitten.com/180/200" target="_blank">Cute Kitten 1</a></option> 
    <option><a href="http://placekitten.com/130/200" target="_blank">Cute Kitten 1</a></option> 
    </select> 
</body>

CSS代码：

.thumbnails { 
    overflow: auto; 
    list-style-image: none; 
    list-style-position: outside; 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
} 

.thumbnails li { 
    float: left; 
} 

.image-picker option { 
    border-radius: 15px; 
} 

.image_picker_image { 
    border-radius: 118px !important; 
    height: 50px !important; 
    width: 50px !important; 
} 

ul.thumbnails.image_picker_selector li .thumbnail.selected { 
    /* background: #fff !important; */ 
    border: 0px !important; 
    filter: alpha(opacity=40) !important; 
    opacity: 0.6 !important; 
    background-image: url('https://cdn0.iconfinder.com/data/icons/feather/96/circle-check-128.png') !important; 
    background-size: contain !important; 
} 

ul.thumbnails.image_picker_selector li .thumbnail { 
    border: 0px !important; 
} 

ul.thumbnails.image_picker_selector li .thumbnail.selected { 
    background: #fff !important; 
}

JavaScript代码：

function imgpop() { 
    var il, imga, imgatxt; 
    il = document.getElementById('imglist').getElementsByTagName('option'); 
    for (i = 0; i < il.length; i++) { 
    imga = il[i].getElementsByTagName('a')[0]; 
    imgatxt = imga.firstChild; 
    imgatxt.nodeValue = imgatxt.nodeValue.replace(/ \(new window\)/, ''); 
    imga.onclick = function() { 
     return popw(this); 
     } 
     //imga.onkeypress=function(){return popw(this);} 
    } 
} 

function popw(o) { 
    var newimg; 
    if (o.parentNode.getElementsByTagName('img').length > 0) { 
    o.parentNode.removeChild(o.parentNode.getElementsByTagName('img')[0]); 

    } else { 
    newimg = document.createElement('img'); 
    newimg.style.display = 'block'; 
    newimg.onclick = function() { 
     this.parentNode.removeChild(this); 
    }; 
    newimg.src = o.href; 
    o.parentNode.appendChild(newimg) 
    } 
    return false; 
} 

if (document.getElementById && document.createTextNode) { 
    window.onload = function() { 
    imgpop(); 
    } 
}

我想在选项标记的点击生成图像。并且在点击选项标签图像后应该隐藏。如果我选择第一个选项标签，它应该显示图像。并与所有选项标签相同。我的js文件不能用于“选择选项/选项/选择”标签，但如果我在“ul li/li/ul”标签下提供图像，它开始工作。

来源

2016-08-05 Bhaskar Saurabh Vicky

为动态添加点击事件的任何元素，你可以使用'的document.getElementById（ “ID”）。的addEventListener（ '点击'，函数（）{的console.log（”做一些'）}）' – Mostafa

你能否详细说明你的问题的第二部分？你想在不同的浏览器窗口上打开一个新的图像吗？ – GibboK

首先，您的HTML无效。 – Kaiido

您可以使用jQuery作为在下面的示例中的表单元素上添加.click()事件。从jQuery的

文档细节：https://api.jquery.com/click/

在可以做同样的香草的JavaScript（无jQuery的）是这样的：

document.getElementById("imglist").addEventListener('click', function(){console.log('execute on click')});

$(function() { 
 
    $('#imglist').click(function(event) { 
 
    alert(event.target.value); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple="multiple" id="imglist" class="image-picker show-html"> 
 
    <option>Cute Kitten 1</option> 
 
    <option>Cute Kitten 2</option> 
 
    <option>Cute Kitten 3</option> 
 
</select>

来源

2016-08-05 08:16:50 GibboK

我们可以在onclick（）上生成新图像吗？

@BhaskarSaurabhVicky这是不可能的，因为

你试试这个

var btn = document.createElement("form"); 
btn.addEventListener('click', keyFunction); 
document.body.appendChild(btn);

来源

2016-08-05 06:09:16

你不应该这样做，因为输入，选择和textarea元素呈现依赖于操作系统，并且我很清楚地知道，t帽子操作系统不允许使用除了选项内部的纯文本之外的东西。要做你的任务，你应该添加onchange事件，在那里你会做你的逻辑。

像这样的事情

var select = document.getElement... 
var option = select.options[select.selectedIndex]; 
switch(option.value){ 
    case '1': 
    case 1: 
    console.log(1) 
    break; 
}

来源

2016-08-05 08:21:58 degr

如何在使用javascript的表单元素上添加.click（）事件？

回答

相关问题