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

button press makes javascript reload page unintentionally

本文关键字：加载 新加载 按钮 无意中 JavaScript      更新时间：2023-09-26

我有一些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;
});

所以基本上我可以继续添加选项，在第一个选项上我可以添加无限的图像，但是，在上述任何选项(生成的选项(上，当我按"添加图像"时，它只是重新加载页面，让我丢失到目前为止生成的所有内容？

这个想法是，我想允许某人输入他们想要添加的选项和每个选项的图像，然后最终将它们添加到数据库中。

谢谢

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

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

另外，通过查看您的代码，我认为您可能会从研究JavaScript模板引擎中受益。他们使这样的事情变得超级容易。http://underscorejs.org 有一个很好的包裹，http://handlebarsjs.com/也很甜。

更改：

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

自：

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

阻止按钮提交表单。 有关详细信息，请参阅类型属性。

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

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

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

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

这是一个更新的小提琴。

建议：我会使用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。

您正在创建 ID 为 "add_option" 的多个元素。这不合适。它可能在某些浏览器中有效。

此外，当它是原始 HTML 中的按钮时，您将"单击"处理程序附加到该按钮。

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

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

提示：

您可能想要的是一种在javascript中通过ajax提交表单内容的方法。这不适合胆小的人。网络上有很多相互矛盾的信息，因为最近的HTML5更改使它变得非常容易，但所有旧信息仍然漂浮在周围。你需要找出FormData是一个javascript对象类，并将其作为数据传递给jQuery的$.ajax()。请务必查找此类示例，以便为 ajax 调用获取正确的其他属性。

相关文章：