我怎样才能让这个有用的 JSFiddle 在我的网站上工作？

Question

好的，我发现这个 JSfiddle 可以在单击时添加另一个输入字段，当我将代码从 JSFiddle 复制到我的站点时，HTML、Javascript 和必要的 Jquery。经过大量研究，我似乎无法弄清楚为什么结果总是没有。实际上这很令人沮丧。让我把代码扔给你，看看你能不能告诉我我在哪里是愚蠢的。 xD

这是我想要的JSfiddle。

HTML:

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>    
<script src="js/custom.js"></script>

Javascript:

$(document).ready(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt"     size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a     href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

我确保将 jquery 放在自定义 JS 文件之后，我用 $(document).ready() 包裹了我的 JavaScript 我只是不确定接下来要尝试什么。请帮忙！！！谢谢！

Answer 1

您 jQuery 列出了两次。你只需要其中之一。这会导致问题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"</script>

另外，你提到<script src="js/bootstrap.min.js"></script>但是它上传到你的服务器了吗？如果没有，您可以使用这样的 CDN：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 2

而不是使用 $('#yourObjectId').live('click', function()); 我建议您使用：

$('#yourObjectId').on('click', function() { //put your codes here }); 要么 $('#yourObjectId').click(function() { //put your codes here });

.live('click') 已弃用，因为您正在使用 jQuery1.11.3。如果您只使用 jQuery1.4.3 或以前的版本，它应该可以工作。

Answer 3

试试这个

1.remove: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

2.change这样的js放在你的上面custom.js文件：

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('body').on('click','#addScnt',function(e) {
         e.preventDefault();
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;

        });

        $('body').on('click','#remScnt',function(e) { 
        e.preventDefault();
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }

        });
});

jsfiddle: http://jsfiddle.net/tZPg4/14890/

Answer 4

该网站似乎缺少一个名为 "owl-carousel" 的模块。因此，JS 遇到错误，事件未绑定到负责创建输入框的 link。

我怎样才能让这个有用的 JSFiddle 在我的网站上工作？

How can I make this useful JSFiddle i found work on my site?

html

javascript

jquery

jsfiddle