javascript - onclick 函数在 Ajax 加载的按钮中不起作用

Question

所以，我有一个网站，在选择日期后会加载一些带有 Ajax 请求的表单。在这个加载的网站中(我只是将其内容添加到模式中)，我有一个按钮

<button class="btn btn-success" type="button" onclick="addInput()" name="add">
   Dodaj kolejny przedział.
</button>

应该调用函数 addInput()，该函数在“master”html 文件中定义

<script type="text/javascript">

$(document).ready(function() {

fields = 0;
function addInput() {
  alert("dodajemy");
   if (fields != 24) {
  document.getElementById('text').innerHTML += "test<br>";
  // document.getElementById('text').innerHTML += "Poczatek: <input type='text' value='' />Koniec: <input type='text' value='' /><br />";
  fields += 1;
} else {
  document.getElementById('text').innerHTML += "No wiecej ci nie potrzeba<br>";
}

};  

$.ajaxSetup({ cache: false, type: 'POST',
headers: { "cache-control": "no-cache" } });

$("#wybierz_pokoj").submit(function() {

    var url = "/testowa/wybierz_pokoj" // the script where you handle the form input.
    document.getElementById("modal").innerHTML = "Czekamy"
    $.ajax({
           type: "POST",
           url: url,
           evalJS: true,
           data: $("#wybierz_pokoj").serialize(), // serializes the form's elements.
           cache: false,
           success: function(data)
           {
              document.getElementById("modal").innerHTML = data;
           }
         });

    return false; // avoid to execute the actual submit of the form.
});
}); 
</script>

单击按钮后，我收到“Uncaught ReferenceError:addInput 未定义”错误。

我做错了什么？

Answer 1

最好的解决方案是不要编写内联 JS 并按照预期的方式使用 jQuery。

从 HTML 中删除 onclick 并将该事件与 jQuery 绑定(bind)。

$(document).ready(function() {


    $('button[name="add"]').on('click', function(){
        addInput();
    });

    fields = 0;
    function addInput() { // etc etc

您实际上也不需要 dom.ready 范围内的函数。

Demo