按鈕使JavaScript無意中重新加載頁面

Question

我有一點javascript，我想用它來允許用戶輸入無限選項和無限圖像URLS。

我已經做了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; 
}); 

所以基本上我可以繼續添加選項天晴及我可以在任何時候添加無限圖像e先前的選項（生成的）當我按下'添加圖像'它只是重新加載頁面使我失去了生成的所有東西？

這個想法是，我想讓某人爲每個選項輸入儘可能多的選項和圖像，因爲他們想要添加，然後最終將它們添加到數據庫中。

感謝

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處理程序將不會綁定到您創建的新的按鈕。周圍的一種方法是使用.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()之後，您需要執行的操作。

按鈕的正常工作是提交它所在的表單。提交表單會將東西發送到服務器，服務器將發回將顯示的內容。

提示：

你可能想要的是通過AJAX腳本內提交表單內容的方式。這不是因爲心臟不好。網上有很多相互衝突的信息，因爲最近的HTML5變化讓它變得非常容易，但所有舊信息仍然在浮動。您需要了解FormData這是一個javascript對象類，並將其作爲數據傳遞給jQuery的$.ajax()。請務必查找相關示例，以獲得適用於ajax調用的其他屬性。