動的に生成されたボタン、name = 'answer'の無効なフォームコントロール

Question

動的に生成されたボタンにイベントを添付する際に問題があります。しかし、いくつかのresearchの後では、ほとんどのソリューションはこのエラーがフォームコントロールから生成されると主張しています。しかし、私の場合にはエラー「名= 『答え』が無効なフォームコントロールは、」生成されたと私は動的に生成されているボタンが押されたときにトリガされます。

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

私は、既存のdivとの通話にボタンを追加していますそれは次のようにクリックされたときに、この要素を削除onclickの機能：このメソッドは、最初のボタンの上にのみ動作します

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

クロームでこれを実行した後は付け加えました。最初のボタンが期待どおりに削除された後、エラー "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

イベントリスナーがページの読み込み時に作成されるためです。

あなたはだからあなたの例では、それはあなたがこれを行うと、BoxInner要素は常に任意の要素上のすべてのクリックをリッスンします

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

ようなものになるだろう。この

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

ような何かを行う必要があります内部では、最初に作成されたかどうかは、IDがdynamicButton