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添加到文档中，但是当文档完成$(document).ready(function (){时你的js函数加载了一个并且仅在html元素上有效。那个时刻的文件，而不是元素女巫将在之前创建。

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

重新计算功能

例如

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

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

在js代码中添加creadte模式后somefunctionname();形成

Answer 2

     .append( "<p>Test</p>" );

不是

    .append( "Test" );

尝试

    .html('test');

http://api.jquery.com/append/

http://api.jquery.com/html/

也可能是您的if条件不满意

模态体中无法识别JS代码..为什么？

2 个答案: