Question

我正在form页面上生成动态button和handlebars。

原始handlebars代码是：

{{#each record}}
    <input class="form-control" type="text" id="comment" value={{comment}}> 
    <button class="btn small btn-success" id="btn-savecomment">SAVE COMMENT</button>
{{/each}}

我有一个jquery脚本，用于在按下每个按钮时保存表单的内容：

$(document).ready (
    function() {
        $(document).on('click','#savecomment',function(event){
            // save id: comment to record
    );

目的是允许用户键入注释，然后将其保存到每条记录中。

但是，在查看评论时，如何确保按钮标识正确的输入表单？当我点击某个特定按钮时，它只检索第一条记录中的注释，因为它们都具有相同的ID。

感谢帮助！

Answer 1

您不能在不同的元素上使用相同的ID。这就是为什么你的代码不起作用的原因。给每个元素一个不同的id。您可以使用{{#each record}} <input class="form-control" type="text" id="comment" value={{comment}}> <button class="btn small btn-success btn-savecomment" id="btn-savecomment-{{@index}}">SAVE COMMENT</button> {{/each}}来获取当前的迭代计数，然后在id中使用它来生成动态ID，即：

$(document).ready (function() {
    $(document).on('click', '.btn-savecomment', function (event) {
        // save id: comment to record
    });
});

您也应该对按钮执行相同的操作。在您的jQuery代码中，您可以使用{{@index}}方法

访问输入

然后您可以使用jquery访问它。或者您也可以使用class而不是id。那会更好。

Answer 2

好吧，你可以动态生成ID，但很可能你应该只使用更适合的类或数据值（或类似）：

{{#each record}}
    <input class="form-control" type="text" data-comment={{@index}} value={{comment}}> 
    <button class="btn small btn-success" data-trigger="save">SAVE COMMENT</button>
{{/each}} 

$(document).on("click", "[data-trigger='save']", function (evt) {
  var commentID = $(this).prev().data("comment"); //index number, can be pretty much anything
});

Answer 3

你在做什么实际上是错的。如您所知，POST不应该重复。你应该使用这样的东西：

DELETE

下一个是在jQuery中：

ID

把手＆amp; Jquery：动态生成的id

3 个答案: