Question

我必须从JavaScript事件中“取出”元素名称。

function listener(e) { //my listener
  alert(e.key);
}

// I add the listener to the second input
document.getElementsByName('i2')[0].addEventListener('keypressed', listener);

<html>
<form id='myform'>
  <label>I1:</label>
  <input type='text' name='i1' onkeypress='listener(event)'></input>
  <br>
  <label>I2:</label>
  <input type='text' name='i2'></input>
</form>
<script src="./code.js" type="text/javascript"></script>
</html>

现在，如果我在输入i1中写一些文本，则会弹出警报，但是如果我在第二个字段中输入文本，我不会。

我的想法是通过JavaScript将侦听器添加到我需要的输入中，因为易于维护。

我想念什么？

Answer 1

为了引用您动态创建的元素，必须将其作为加载DOM时已经存在的元素的子元素来引用。这就是所谓的委托。

我很久以前在jsfiddle中创建的以下示例是在jQuery中，而不是纯JavaScript，但该示例就足够了。

Fiddle Example

<div id='test_div'>
    <button id='button1' value='button1'>Button 1</button>
    <div id='inside_div'></div>

    <div id='inside_div2'></div>
</div>
<script>
    $('#inside_div').on('click', '#button2', function () {    
        var i = 3;
        while (i <= 5) {
            var btn_txt = "<br><br><button class='test_class' id='button" + i + "' >Button " + i + "</button>";
            $('#inside_div').append(btn_txt);
            i++;
        }
    });

//This is to demonstrate a listener that works on multiple elements with the same class.
$('#inside_div').on('click', '.test_class', function () {
    alert('Class Alert');
});
</script>

通过HTML添加侦听器有效，但不能通过JavaScript添加侦听器

1 个答案: