输入标记的意外标识符

unexpected identifier for input tags

本文关键字：意外 标识符 输入      更新时间：2023-09-26
  • 我正在尝试动态显示编辑和删除按钮
  • 你能告诉我如何修复意外标识符的错误吗
  • 以及如何实现编辑和删除功能

  • 在下面的代码笔中提供代码http://codepen.io/anon/pen/eZRMPW?editors=1011

    $('#localStorageTest').submit(function(e) {
    e.preventDefault();
    var div = "<div><span>"+$('#name').val()+"</span><span>"+$('#email').val()+"</span><input data-name="edit" type="button" value="Edit" name="editHistory"></div>";  //add your data in span, p, input..
    alert(div);
    $('.gettingValues').html(div); //apendd the div
    $('#localStorageTest')[0].reset(); //clear the form
    localStorage.clear();
});

您的代码有两个问题-

  1. 你在双引号中使用双引号，它们相互抵消。因此，更改以下代码-

    var div = "<div><span>"+$('#name').val()+"</span><span>"+$('#email').val()+"</span><input data-name="edit" type="button" value="Edit" name="editHistory"></div>";

    到这个-

    var div = "<div><span>"+$('#name').val()+"</span><span>"+$('#email').val()
        + "</span><input data-name='edit' type='button' value='Edit' name='editHistory'></div>";

    请注意，我已将data-name和type用单引号括起来。

  2. 当您动态创建元素时，事件不能直接绑定到它们，因此click()函数永远不会被触发。您应该将其转换为-

    $('.gettingValues').on('click', "input[name='editHistory']", function(){
   data = $(this).data('name');
   console.log(data);
   editHistoryAPI(data);
});

    执行上述操作的原因是，当您必须将事件绑定到动态创建的元素时，应该使用on（）函数并将事件委托给最近的静态元素，该元素封装动态元素。在您的案例中，这个静态元素是类为gettingValues的div。

更新的笔-http://codepen.io/schikara/pen/zqzjGW?editors=1011

希望这能有所帮助！

这里是一个答案（在注释之后）。将字符串块内的所有双引号"更改为单引号'：

$('#localStorageTest').submit(function(e) {
    e.preventDefault();
    var div = "<div><span>"+$('#name').val()+"</span><span>"+$('#email').val()+"</span><input data-name='edit' type='button' value='Edit' name='editHistory'></div>";  //add your data in span, p, input..
    alert(div);
    $('.gettingValues').html(div); //apendd the div
    $('#localStorageTest')[0].reset(); //clear the form
    localStorage.clear();
});
相关文章：