logo标签列表

按钮按下会意外重新加载javascript页面

javascriptjqueryhtml
4

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

基本上我可以很好地添加选项，并且在第一个选项上，我可以添加无限的图像，然而，在任何先前生成的选项上（即生成的选项），当我按下“添加图像”时，它只是重新加载页面，使我失去到目前为止生成的一切内容？
我的想法是允许某人输入尽可能多的选项和每个选项的图像，然后最终将它们添加到数据库中。
谢谢
3个回答
7
在您的回调函数中，您只需要像这样阻止默认操作：
$("#whatever").click(function(event) {
    event.preventDefault();
    ...
});

此外，从您的代码来看，我认为您可能会受益于了解JavaScript模板引擎。它们可以使此类事情变得非常容易。http://underscorejs.org中包含了一个不错的模板引擎，而http://handlebarsjs.com/也很不错。
3

更改：

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

To:

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

为防止按钮提交表单。请参阅type属性获取更多信息。
您还可以在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()

如果您的用户界面变得过于复杂，您可能希望使用MVVM类型模式，例如Knockout.js，通过将所有内容绑定到模型，可以非常轻松地完成所有这些工作。您只需向模型添加一个项目，它就会自动创建新的用户界面。
如果我添加了那个选项，是的，我可以添加选项，但是该新选项的图像不会被添加。 - bubblebath
@bubblebath - 哦，是的，因为你正在动态添加新的HTML，所以你必须使用.live而不是.click。我已经更新了我的答案。 - Mike Christensen
1
您正在创建多个ID为“add_option”的元素。这不是正确的做法。它可能在某些浏览器中起作用。
此外，您正在将“click”处理程序附加到该按钮上，而它是原始HTML中的按钮。
但是，当您添加更多HTML和另一个按钮时，您没有在其上放置单击处理程序。这是您在使用新HTML调用.append()之后需要执行的操作。
按钮的正常工作是提交其所在的表单。提交表单将向服务器发送内容，并且服务器将发送返回的内容以供显示。
提示：
您可能想要的是一种通过javascript以ajax方式提交表单内容的方法。这不适合胆小的人。因为最近HTML5的变化使得它非常容易，但所有旧信息仍然存在。您需要了解FormData，它是一个javascript对象类，并将其作为数据传递给jQuery的$.ajax()。确保查找有关该主题的示例以获取ajax调用的其他属性。
我以为会有一种简单的方法来实现这个，使其具有动态性。 - bubblebath
如果你在谈论点击部分，那么有一种jQuery的.on()变体可以处理冒泡事件。它可以放置在一个容器上，以处理该容器内元素的点击事件，例如特定的“class”。请参见http://api.jquery.com/on/#on-events-selector-data。 - Lee Meador
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接