Question

我有以下代码，我希望能够让我点击一个按钮并在页面上添加另一个框但是每次点击其中一个按钮时就会重置页面

<style>
    div.box 
    { 
        width: 50px; 
        height: 50px; 
        background-image: url("Images/smallBox.jpg"); 
    }

    div.largeBox 
    { 
        width: 100px; 
        height: 100px; 
        background-image: url("Images/largeBox.jpg");
    }
</style>
<script type="text/javascript">
    $(function () {
        setupDragging();
    });
    function setupDragging() {
        $(".box").draggable({ snap: true });
        $(".largeBox").draggable({ snap: true });
    }
    function addSmallBox() {
        var boxArea = document.getElementById('boxArea');
        var newBox = document.createElement('div');
        newBox.setAttribute('class', 'box');
        boxArea.appendChild(newBox);
        setupDragging();
    }
    function addLargeBox() {
        var boxArea = document.getElementById('boxArea');
        var newBox = document.createElement('div');
        newBox.setAttribute('class', 'largeBox');
        boxArea.appendChild(newBox);
        setupDragging();
    }
</script>
<form>
<button onclick="addSmallBox();">small box</button>
<button onclick="addLargeBox();">large box</button>
</form>

<div id="boxArea">
</div>

请有人让我知道我做错了什么以及如何实现我想要的。

解答：

只是最终结果的更新

    <style>
    div.box 
    { 
        width: 50px;
        height: 50px;
        background-image: url("../Images/smallBox.jpg");
        position: absolute;
    }

    div.largeBox 
    { 
        width: 100px;
        height: 100px;
        background-image: url("../Images/largeBox.jpg");
        position: absolute;
    }
</style>
<script type="text/javascript">
    $(function () {
        setupDragging();
        $('.addBox').click(function(e){
        if($(this).hasClass('smallBox')) addSmallBox();
        else if($(this).hasClass('largeBox')) addLargeBox();
        e.preventDefault();
        })
    });
    function setupDragging() {
        $(".box").draggable({ snap: true });
        $(".largeBox").draggable({ snap: true });
    }
    function addSmallBox() {
        $('<div>', { class: 'box' }).appendTo('#boxArea')
        setupDragging();
    }
    function addLargeBox() {
        $('<div>', { class: 'largeBox' }).appendTo('#boxArea')
        setupDragging();
    }
</script>
<form>
<button class='addBox smallBox'>small box</button>
<button class='addBox largeBox'>large box</button>
</form>

<div id="boxArea">
</div>

我使用了以下几个答案，这是最终的结果，但最终还是沿着html5路线走了。

Answer 1

您使用的按钮标记是HTML5 version of a form submit button，会导致页面刷新。将按钮更改为：

<input type="button" onclick="addSmallBox();" value="small box" />

或者将return false放在每个javascript函数的底部。

Answer 2

一些事情：

始终将JS与代码分开（这意味着丢失onclick属性并将其绑定在javascript中。）
表格仍在提交中;让你的函数返回false / preventDefault（jQuery）来避免这种情况。

一些提示：

既然你已经在使用jQuery了，为什么不用它来构建html元素呢？（例如$('<div>',{class:'box'}).appendTo('#boxArea')）

Answer 3

首先，既然你正在使用jQuery，如果我是你，我不会在你的按钮中使用onclick属性。相反，添加如下事件监听器：

$('button').click(function(){
  addLargeBox();
  return false;
});

OR

$('button').click(function(e){
  addLargeBox();
  e.preventDefault();
});

这两个都会阻止用户的浏览器关注链接，但会根据需要执行JavaScript。

此外，由于您需要执行两个不同的功能，具体取决于单击的按钮，您应该添加一个类或ID来区分这两个。

您的标记将如下所示：

<button class="add-box">small box</button>
<button class="add-box large-box">large box</button>

你的JavaScript将是：

$('.add-box').click(function(){
  if ($(this).hasClass('large-box')) addLargeBox();
  else addSmallBox();
  return false;
});

Answer 4

您必须从click事件返回false以防止跟踪链接的默认浏览器行为。

Answer 5

我不确定为什么只是通过浏览代码，但也许您可以尝试检索boxArea.InnerHTML，向其添加适当的HTML字符串，并将boxArea.InnerHTML设置为结果。

类似的东西：

boxArea.InnerHTML = boxArea.InnerHTML +“＆lt; div class ='largeBox'＆gt;＆lt; / div＆gt;”;

用javascript插入div

5 个答案: