Question

您好我正在尝试使用Jquery将字段中输入的文本添加到列表的末尾。这是我的HTML。

    $(function() {
    
    
    var $newitem = $('#newItemButton');
    var $text = $('#itemDescription');
    
    $newitem.show();
    $('#newItemForm').hide();
    $('#showForm').on('click', function(){
    	$newitem.hide();
    	$('#newItemForm').show();
    });	 
    $('#addButton').on('submit', function(e){
    	e.preventDefault();
    	var text = $text.val();
    	console.log(text);   //Why is this not working 
    	$('li:last').after('<li>'+ text +'</li>');
    	$newItemForm.hide();
        $newitem.show();
        
    });
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
      <head>
        <title>JavaScript </title>
        <link rel="stylesheet" href="css/c07.css" />
      </head>
      <body>
        <div id="page">
          <h1 id="header">List</h1>
          <h2>Buy groceries</h2>
          <ul>
            <li id="one" class="hot"><em>fresh</em> figs</li>
            <li id="two" class="hot">pine nuts</li>
            <li id="three" class="hot">honey</li>
            <li id="four">balsamic vinegar</li>
          </ul>
          <div id="newItemButton"><button href="#" id="showForm">new item</button></div>
          <form id="newItemForm">
            <input type="text" id="itemDescription" placeholder="Add description..." />
            <input type="submit" id="addButton" value="add" />
          </form>
        </div>
        <script src="js/jquery-1.11.0.js"></script>
        <script src="show.js"></script>
      </body>
    </html>

当其他事情正在发挥作用时，用户输入不会被添加到li的末尾。我试过控制台记录用户输入值，但没有显示任何内容。有人可以告诉我我做错了吗？

也有人能告诉我他们如何有效地调试Jquery？我尝试在chrome检查器中进行跟踪，但它转到Jquery文件，这与使用vanilla JS并跟踪程序执行和变量赋值似乎是最不可能的，因为运行了如此多的Jquery代码。

Answer 1

尝试使用

$(function() {
    var $newitem = $('#newItemButton');
    var $text = $('#itemDescription');

    $newitem.show();
    $('#newItemForm').hide();
    $('#showForm').on('click', function(){
        $newitem.hide();
        $('#newItemForm').show();
    });

    $('#addButton').on('click', function(e){
        e.preventDefault();
        var text = $text.val();
        console.log(text);
        $('li:last').after('<li>'+ text +'</li>');
        $newItemForm.hide();
        $newitem.show();

    });
});

您应该使用click，而不是submit。

如何调试JavaScript / jQuery

您的console.log方法并不错。既然你已经注意到它没有被执行，你应该问自己，为什么它没有被执行。在这种情况下，它是错误的侦听器标记（submit而不是click）。

正如您所提到的，另一种方法是使用Chrome调试器。您可以通过单击行号来设置断点。这样就可以跳过所有不相关的代码。

你也应该总是使用＆＃34; Step over＆＃34; （或 F10 ）在调试模式下前进，不必不必要地看到jQuery代码。

Answer 2

e.preventDefault会阻止当前的行为。看看你的代码。

 $('#addButton').on('submit', function(e) {
      e.preventDefault();

您添加了preventDefault，这意味着您无法阻止提交表单。此代码应更改为

$('#newItemForm').on('submit', function(e) {
      e.preventDefault();

现在，只要表单尝试提交，您就会阻止它。这应该按照您的预期工作。请看下面的代码段。

＆＃13;

$(function() {

var $newitem = $('#newItemButton');
var $text = $('#itemDescription');

$newitem.show();
$('#newItemForm').hide();
$('#showForm').on('click', function(){
    $newitem.hide();
    $('#newItemForm').show();
});  
$('#newItemForm').on('submit', function(e){
    e.preventDefault();
    var text = $text.val();
    console.log(text);   //Why is this not working 
    $('li:last').after('<li>'+ text +'</li>');
    $('#newItemForm').hide();
    $newitem.show();
});
});

＆＃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>Buy groceries</h2>
      <ul>
        <li id="one" class="hot"><em>fresh</em> figs</li>
        <li id="two" class="hot">pine nuts</li>
        <li id="three" class="hot">honey</li>
        <li id="four">balsamic vinegar</li>
      </ul>
      <div id="newItemButton"><button href="#" id="showForm">new item</button></div>
      <form id="newItemForm">
        <input type="text" id="itemDescription" placeholder="Add description..." />
        <input type="submit" id="addButton" value="add" />
      </form>
    </div>

＆＃13;

Answer 3

＆＃13;

$(function() {
    
    
    var $newitem = $('#newItemButton');
    var $text = $('#itemDescription');
    
    $newitem.show();
    $('#newItemForm').hide();
    $('#showForm').on('click', function(){
    	$newitem.hide();
    	$('#newItemForm').show();
    });	 
    $('#addButton').on('click', function(e){
    	e.preventDefault();
    	var text = $text.val();
    	$('ul').append('<li>'+ text +'</li>');
    	$('#newItemForm').hide();
      $newitem.show();
      $text.val('');
    });
    
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
      <head>
        <title>JavaScript </title>
        <link rel="stylesheet" href="css/c07.css" />
      </head>
      <body>
        <div id="page">
          <h1 id="header">List</h1>
          <h2>Buy groceries</h2>
          <ul>
            <li id="one" class="hot"><em>fresh</em> figs</li>
            <li id="two" class="hot">pine nuts</li>
            <li id="three" class="hot">honey</li>
            <li id="four">balsamic vinegar</li>
          </ul>
          <div id="newItemButton"><button href="#" id="showForm">new item</button></div>
          <form id="newItemForm">
            <input type="text" id="itemDescription" placeholder="Add description..." />
            <input type="submit" id="addButton" value="add" />
          </form>
        </div>
        <script src="js/jquery-1.11.0.js"></script>
        <script src="show.js"></script>
      </body>
    </html>

＆＃13;

Answer 4

这是一个有效的更新javascript：

$(function() {
    var $newitem = $('#newItemButton');
    var $text = $('#itemDescription');

    $newitem.show();
    $('#newItemForm').hide();
    $('#showForm').on('click', function(){
        $newitem.hide();
        $('#newItemForm').show();
    });  
    $('#newItemForm').on('submit', function(e){
        e.preventDefault();
        var text = $('#itemDescription').val();
        console.log(text);   //Why is this not working 
        $('li:last').after('<li>'+ text +'</li>');
        $('#newItemForm').hide();
        $newitem.show();
    });
});

更多解释

必须在submit元素上绑定form事件。请参阅JQuery文档：https://api.jquery.com/submit/

在您的代码中，您滥用了$()功能。它应该选择一个选择器作为参数。基本上，您可以使用元素的id。

无法向li

4 个答案:

如何调试JavaScript / jQuery