Question

我正在尝试使用jQuery从文本框中将新项添加到列表中，但它无法正常工作。这里有很多代码，我想在我的代码中找到问题。

HTML代码

<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>

<ul>

<li id="one" class="hot"><em> Fresh  </em>Figs </li>
<li id="two" class="hot"> Honey  </li>
  <li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>

</ul >
</div>
 <div id="newItemButton"><button href="#" id="showForm">NEW ITEM</button>                  
 </div> 
  </br>
 <form id="newItemForm">

 <input type="text" id="itemDescription" placeholder="Add a new item...."/>
 <input type="submit" id="addButton" value="Add"/>

 </form>

和jQuery代码

 $(function(){

     var $newItemButton=$('#newItemButton');
     var $newItemForm=$('#newItemForm');
     var $textInput=$('item:textbox');

     $newItemButton.show();
     $newItemForm.hide();
     $('#showForm').on('click',function(){
         $newItemButton.hide();
         $newItemForm.show();
    });
    $newItemForm.on('submit',function(e){
        var $newText=$('input:textbox').val();
        $('li:last').after('<li>' + $newText + '</li>').val();
        $newItemForm.hide();
        $newItemButton.show();
        $textInput.val(' ');
    });
 });

Answer 1

我知道这有一个公认的答案 - 我没有完全阅读你的问题，所以这可能不完全符合你的要求 - 但我想用更少的代码提出另一种方法。下面是一个单击它的按钮 - 从文本框中获取值并将其附加到列表中（注意我给列表一个ID）。这样你就有了另一种选择。你根本不需要表格而且你当然不需要提交它 - 只是为了获得价值并将其附加到列表中。只是说。

＆＃13;

$(document).ready(function(){
  $('#addButton').click(function(){
    var newItem = $('#itemDescription').val();
    $('#myList').append('<li class="hot">' + newItem + '</li>');
    $('#itemDescription').val('');
    })
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
  <h1 id="header">LIST</h1>
  <h2>Add</h2>

  <ul id="myList">
    <li id="one" class="hot"><em> Fresh  </em>Figs </li>
    <li id="two" class="hot"> Honey  </li>
    <li id="three" class="hot">Nuts </li>
    <li id="four" class="hot">Bread </li>
  </ul >
</div>

 <input type="text" id="itemDescription" placeholder="Add a new item...."/>
 <button type="button" id="addButton">Add</button>

＆＃13;

Answer 2

检查this fiddle。

你的jQuery中有一个小错误。这是工作代码：

e.preventDefault();

首先，您必须阻止提交时表单元素的默认行为。为此，我添加了class cashadvance(osv.osv): _name = 'comben.cashadvance' _order = 'create_date DESC' _columns = { 'user_target' : fields.many2one('res.users', string='User Target'), 'mail_target' : fields.char(string='Email Target'), }功能。然后我收到了这个错误：

未捕获错误：语法错误，无法识别的表达式：不支持伪：文本框

为了解决这个问题，我将选择器更改为输入字段的ID。现在它完美无缺。

从文本框输入并添加到列表中不起作用

2 个答案: