如何为使用innerHTML创建的元素添加事件侦听器? 在我的示例代码中,我想为X按钮添加事件监听器
<button class="btn btn-sm btn-success add-input-text">add</button>
<script>
var addInputText = document.querySelector('.add-input-text');
var userForm = document.querySelector('.user-form');
addInputText.addEventListener('click', function(){
userForm.innerHTML += `<button class="form-section-remove-
1">X</button>`;
});
</script>
答案 0 :(得分:1)
只需像往常一样添加事件监听器即可。
<button class="btn btn-sm btn-success add-input-text">add</button>
<script>
var addInputText = document.querySelector('.add-input-text');
var userForm = document.querySelector('.user-form');
addInputText.addEventListener('click', function(){
userForm.innerHTML += `<button class="form-section-remove-
1">X</button>`;
document.querySelector(".form-section-remove-1").addEventListener(/*whatever you're doing*/)
});
</script>
答案 1 :(得分:0)
您可以使用querySelector,其结果只能是您创建的按钮,或者可以使用document.createElement('button')
创建按钮,添加事件侦听器,然后使用appendChild
将按钮添加到userForm。
// Works if the is only one button in .user-form with .form-section-remove-1
document.querySelector('.user-form > button.form-section-remove-1').addEventlistener(...);
或者
const xButton = document.createElement('button');
xButton.innerText = 'X';
xButton.classlist.add('form-section-remove-1');
xButton.addEventListener('click', function(event) {
// Do whatever
});
userForm.appendChild(xButton);
答案 2 :(得分:0)
您添加它的方式与添加任何其他事件侦听器的方式完全相同。您只需在将动态添加的元素添加到DOM之后执行此操作。
var addInputText = document.querySelector('.add-input-text');
var userForm = document.querySelector('.user-form');
addInputText.addEventListener('click', function(){
userForm.innerHTML +=
"<button class='form-section-remove-1'>X</button>";
// Now that the new element has been added to the DOM,
// you can work with it as you would any other element.
document.querySelector("button.form-section-remove-1").addEventListener("click", function(){
console.log("You clicked me!");
});
});
<button class="btn btn-sm btn-success add-input-text">add</button>
<div class="user-form"></div>
您会遇到的问题是,因为您正在使用.innerHTML
将新元素添加到DOM中,并且由于可能添加多个元素,所以我们没有办法以便轻松引用第二个和后续按钮。
相反,如果您使用DOM API和.createElement
创建新元素,它将变得更加简单:
var addInputText = document.querySelector('.add-input-text');
var userForm = document.querySelector('.user-form');
addInputText.addEventListener('click', function(){
// Create the element as a new DOM node
let btn = document.createElement("button");
// Now, configure it through its properties and methods:
btn.textContent = "X";
btn.classList.add("form-section-remove-1");
btn.addEventListener("click", function(){
console.log("You clicked me!");
});
// Append it into the DOM
userForm.appendChild(btn);
});
<button class="btn btn-sm btn-success add-input-text">add</button>
<div class="user-form"></div>