javascript - 模态主体中无法识别 JS 代码。为什么？

Question

我使用了模态模板..有一个主模态代码用于所有模态弹出窗口...每个模态都在 <a></a> 中标签。我在特定于练习的每个模式中添加了 html，并链接了我的 javascript 文件以显示每个练习的快速示例，但是当我尝试演示练习时，代码没有被识别。我改变了 <a>至 <div>但这没有帮助。 JS 练习以前在我构建的模式中的另一个项目中工作过，但在这里没有，所有代码以前都工作过。

这是练习的 html

<p style="text-align: center;">Enter a number between 1 - 100.
    <input class="inputBox" type="text" id="fizzBuzzText" name="number" placeholder="Type Number Here">
    <button class="fizzBuzzBtn">Try it!</button>
    <div class="resetButton">
        <button type="reset" class="clearList">Reset</button>
    </div>
    <p class="fizzbuzz"></p>

</div>

这是链接的 javascript

$(document).ready(function (){
    $('.fizzBuzzBtn').click(function () {
        var newNumber = $('.inputBox').val()
        console.log(newNumber);

        var num = +newNumber
        $('.inputBox').val('');
        $('.fizzbuzz').empty();

        if (num !== NaN && num >= 1 && num <= 100 && num % 1 == 0) {

            var i = 1
            while (i <= num) {
                if ((i % 3 === 0) && (i % 5 === 0)) {
                    $('.fizzbuzz').append('FizzBuzz' + " ");
                } else if (i % 3 == 0) {
                    $('.fizzbuzz').append('Fizz' + " ");
                } else if (i % 5 == 0) {
                    $('.fizzbuzz').append('Buzz' + " ");
                } else {
                    $('.fizzbuzz').append(i + " ");
                }
                i++;
            }
        } else {
            alert("Please type in a whole number between 1 and 100!");
        }
    });

    $('.resetButton').click(function (event) {
        event.preventDefault();
        $('#fizzBuzzText').empty();
        $('.fizzbuzz').empty();
    });
});

我没有收到任何错误，它只是在模态主体内不起作用。这是模板模态的常见错误吗？

Answer 1

它在模态中不起作用，因为你在加载之前将 htm 添加到文档中，但是你的 js 函数在文档完成时加载了一个 $(document).ready(function (){ 并且只对那一刻文档中的 html 元素有效，而不对之前创建的元素有效。

要工作，您需要从 $(document).ready(function (){

重新调用函数

例如

   $(document).ready(function (){ somefunctionname(); });

   function somefunctionname(){
    $('.fizzBuzzBtn').click(function () {
   /* put your code here*/
  });
   }

在 somefunctionname(); 之后添加到 creadte modal 的 js 代码，它会起作用