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 is not defined”错误。

我做错了什么？

Answer 1

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

从HTML中删除onclick并使用jQuery绑定事件。

$(document).ready(function() {


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

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

你也不需要在dom.ready范围内真正需要这个功能。

Demo

Answer 2

你已经在document.ready call中定义了这个函数 - 尝试在外面定义它：

<script type="text/javascript">

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>";
}

};  


$(document).ready(function() {

fields = 0;

$.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>

我不确定你对“fields”变量做了什么，但如果你需要它，请确保它也在document.ready函数之外声明。

Answer 3

问题在于范围。 addInput函数位于document.ready()匿名函数内部，因此在该范围之外不可见。 onXXX属性中的Javascript在全局范围内执行，因此无法访问addInput。

最简单的解决方案是将addInput的定义移到匿名函数之外，或将其更改为：

window.addInput = function() {
    ...
};

或者不使用内联Javascript，您可以使用事件委派。见Event binding on dynamically created elements?

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

3 个答案: