Question

我在将事件附加到动态生成的按钮时遇到问题。但是，在一些research大多数解决方案声称此错误通常是从表单控件生成之后。但是在我的情况下，当按下我动态生成的按钮时，正在生成并触发错误“无效的表单控件名称='回答'”：

   $("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent()'>"+ "Button"+"</button>"));

我已将一个按钮添加到现有div并调用onclick函数，该函数在单击时删除了此元素：

function clickEvent()
{
$(this).remove();
}

在chrome中运行此方法后，此方法仅适用于添加的第一个按钮。按预期删除第一个按钮后，它开始生成错误“clickEvent”，并在每次点击时添加一个数字计数，并在阅读了许多帖子后，关于归因于表单的错误我仍然不确定如何解决问题作为按钮与我的HTML文档上的表单完全无关，随后将表单设置为不需要验证并不能解决“novalidate”属性的问题。但请注意，如果我删除附加的onclick事件，则不会触发错误。

任何帮助将不胜感激:)

Answer 1

$("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent(this)'>"+ "Button"+"</button>")); // pass this to clickEvent function

function clickEvent(obj)
{
   $(obj).remove();  // remove button like this
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="BoxInner"></div>

Answer 2

这是因为在页面加载时创建了事件监听器。

你应该做这样的事情

$(wrapper_that_always_exists).on('click', the_freshly_added_element, function() {
    ...
});

因此，在您的示例中，它将类似于

$('#BoxInner').on('click', '#dynamicButton', function() {
    ...
});

当您执行此操作时，BoxInner元素将始终监听内部（最初创建或未创建）内具有ID dynamicButton

的任何元素的所有点击

动态生成的按钮，无效的表单控件，名称='answer'

2 个答案: