按钮按下使javascript无意中重新加载页面

Question

我想要使用一些javascript来允许用户输入无限选项和无限图像URL。

我做了jsFiddle

这是html：

<div class="container-fluid body">


<div class="admin-box">
<form action="http://localhost/MyZone/public_html/index.php/create_option/2" class="form-horizontal" method="post" accept-charset="utf-8"><div style="display:none">
<input type="hidden" name="ci_csrf_token" value="001b4b051689692edec29d09b9837f3a">
</div>    <fieldset>
    <legend>Option Title</legend>
    <div class="control-group">
        <label class="control-label" for="Option title">title</label>
        <div class="controls">
            <input type="text" name="name" id="name" class="span6">
        </div>
    </div>
    <div class="admin-box" id="option_information">
        <fieldset>
        <legend>Option information</legend>
        <div class="control-group">
            <label class="control-label" for="value">Description</label>
            <div class="controls">
                <input type="text" name="value" id="value" class="span6">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="cost_including_vat">Cost including VAT</label>
            <div class="controls">
                <input type="text" name="cost_including_vat" id="cost_including_vat" class="span6">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="vat_of_cost">VAT of cost</label>
            <div class="controls">
                <input type="text" name="vat_of_cost" id="vat_of_cost" class="span6">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="sale_price_including_vat">Sale price including vat</label>
            <div class="controls">
                <input type="text" name="sale_price_including_vat" id="sale_price_including_vat" class="span6">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="vat_of_sale_price">VAT of sale price</label>
            <div class="controls">
                <input type="text" name="vat_of_sale_price" id="vat_of_sale_price" class="span6">
            </div>
        </div>
        <div id="image_addition">

        </div>
        <div class="control-group">
            <button class="controls" id="add_image" value="Add image">Add Image</button>
        </div>
        </fieldset>
    </div>
    <div class="control-group">
            <button class="controls" id="add_option" value="Add option">Add option</button>
    </div>
    <div class="form-actions">
        <br>
        <input type="submit" name="save" class="btn btn-primary" value="Create option">
            or <a href="http://localhost/MyZone/public_html/index.php" class="btn btn-warning">Cancel</a>        </div>
</fieldset>
</form>   

这是Javascript

var counter_image = 1;
$('#add_image').click(function() 
{
    var newrow = '<div class="control-group">'+
            '<label class="control-label" for="image_name'+counter_image+'">Image '+counter_image+' name</label>'+
            '<div class="controls">' +
            '<input type="text" name="image_name'+counter_image+'" id="image_name'+counter_image+'" class="span6" />'+
            '</div>' +
            '</div>' +
            '<div class="control-group">' +
            '<label class="control-label" for="image_description'+counter_image+'">Image '+counter_image+' message</label>' +
            '<div class="controls">' +
            '<input type="text" name="image_description'+counter_image+'" id="image_description'+counter_image+'" class="span6" />' +
            '</div>' +
            '</div>' +
            '<div class="control-group">' +
            '<label class="control-label" for="image_url'+counter_image+'">Image '+counter_image+' URL</label>' +
            '<div class="controls">' +
            '<input type="url" name="image_url'+counter_image+'" id="image_url'+counter_image+'" class="span6" />' +
            '</div>' +
            '</div>';
    $('#image_addition').append(newrow);
    counter_image++;
    return false;
});

var counter_option = 1;
$('#add_option').click(function() 
{
    var newrow = '<fieldset>' +
        '<legend>Option information</legend>'+
        '<div class="control-group">'+
            '<label class="control-label" for="value">Description</label>'+
            '<div class="controls">'+
                '<input type="text" name="value" id="value" class="span6" />'+
            '</div>'+
        '</div>'+
        '<div class="control-group">'+
            '<label class="control-label" for="cost_including_vat">Cost including VAT</label>'+
            '<div class="controls">'+
                '<input type="text" name="cost_including_vat" id="cost_including_vat" class="span6" />'+
            '</div>'+
        '</div>'+
        '<div class="control-group">'+
            '<label class="control-label" for="vat_of_cost">VAT of cost</label>'+
            '<div class="controls">'+
                '<input type="text" name="vat_of_cost" id="vat_of_cost" class="span6" />'+
            '</div>'+
        '</div>'+
        '<div class="control-group">'+
            '<label class="control-label" for="sale_price_including_vat">Sale price including vat</label>'+
            '<div class="controls">'+
                '<input type="text" name="sale_price_including_vat" id="sale_price_including_vat" class="span6" />'+
            '</div>'+
        '</div>'+
        '<div class="control-group">'+
            '<label class="control-label" for="vat_of_sale_price">VAT of sale price</label>'+
            '<div class="controls">'+
                '<input type="text" name="vat_of_sale_price" id="vat_of_sale_price" class="span6" />'+
            '</div>'+
        '</div>'+
        '<div id="image_addition">'+
        '</div>'+
        '<div class="control-group">'+
            '<button class="controls" id="add_option" value="Add image">Add Image</button>'+
        '</div>'+
        '</fieldset>';
    $('#option_information').append(newrow);
    counter_option++;
    return false;
});

所以基本上我可以继续添加选项，并且在FIRST选项上我可以添加无限图像，但是，当我按下“添加图像”时它会重新加载页面使我松散的任何前面的选项（生成的选项）到目前为止产生的一切？

我的想法是，我希望允许某人为每个选项输入尽可能多的选项和图像，然后将其添加到数据库中。

由于

Answer 1

在你的回调函数中，你只需要阻止这样的默认操作：

$("#whatever").click(function(event) {
    event.preventDefault();
    ...
});

此外，通过查看您的代码，我认为您可能会从查看javascript模板引擎中受益。他们制作这样的东西非常容易。 http://underscorejs.org包含了一个很好的内容，http://handlebarsjs.com/也非常好。

Answer 2

变化：

 <button class="controls" id="add_option" value="Add option">

要：

 <button type="button" class="controls" id="add_option" value="Add option">

阻止按钮提交表单。有关详细信息，请参阅type attribute。

您还可以在click处理程序中取消表单提交：

$('#add_option').click(function(e) 
{
   e.preventDefault(); // Cancel form submit
   // Rest of code
});

当然，您还需要更新注入的HTML <button>标记。您将遇到的一个问题是您的.click处理程序不会绑定到您创建的 new 按钮。另一种方法是使用.live绑定：

$('#add_option').live('click', function()
{
   // Old code here
});

这是一个updated Fiddle。

建议：我会使用class代替id，因为不建议多次使用相同的id。基本上，改变：

<button type="button" class="controls" id="add_option" value="Add option">

为：

<button type="button" class="controls add_option" value="Add option">

并将其绑定：

$('.add_option').live('click', function()

如果您的UI过于复杂，您可能需要检查MVVM类型模式，例如Knockout.js，它可以通过将所有内容绑定到模型来轻松完成所有这些非常。您只需将一个项目添加到模型中，它就会自动创建新的UI。

Answer 3

您正在使用ID“add_option”创建多个元素。这不合适。它可能适用于某些浏览器。

此外，您正在将“click”处理程序附加到该按钮，当它是原始HTML中的那个按钮时。

但是当你添加更多HTML和另一个按钮时，你不会在其上放置一个点击处理程序。使用新HTML调用.append()后，您需要做的事情。

按钮的正常工作是提交它所在的表单。提交表单会将内容发送到服务器，服务器将发回的内容将被显示。

<强>提示：

您可能想要的是一种在javascript中通过ajax提交表单内容的方法。这不适合胆小的人。网络上存在大量相互矛盾的信息，因为最近的HTML5更改使得它非常简单，但所有旧信息仍然存在。您需要了解FormData这是一个javascript对象类，并将其作为数据传递给jQuery的$.ajax()。请务必查看其中的示例以使其他属性适合ajax调用。