Question

我正在尝试动态显示编辑和删除按钮。
您能告诉我如何修复错误意外标识符。
以及如何实现编辑和删除功能

在下面的codepen中提供代码 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();
});

Answer 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括在单引号中。

当您动态创建元素时，事件无法直接绑定到它们，因此永远不会触发click()函数。您应该将其转换为 -
```
$('.gettingValues').on('click', "input[name='editHistory']", function(){
   data = $(this).data('name');
   console.log(data);
   editHistoryAPI(data);
});
```
执行上述操作的原因是，当您必须将事件绑定到动态创建的元素时，您应该使用on()函数并将事件委托给包含动态元素的最近的静态元素。在您的情况下，此静态元素是div，其中包含类gettingValues。

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

希望这有帮助！

Answer 2

这是答案（评论后）。将所有双引号"更改为字符串块中的单引号'：

$('#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();
});

输入标签的意外标识符

2 个答案: