Question

这可能是一个非常基本的问题，我知道如何使用纯DOM进行操作，但是想学习JQuery的方法。

在使用适当的JQuery选择器识别节点集之后，我想在每个节点附加一个textarea，Save and Cancel按钮，并在按钮上附加适当的回调函数，将值存储到数据库中。如果数据库存储了值已经，它应该在textarea中预先填充。我可以处理后端交互部分，我只是想知道做这种事情的最佳实践，直到添加/删除表单元素。

由于

Answer 1

这样的事情，也许是：

jQuery(yourNodes).each(function(){

    var self = this,
        loading = $('<div>LOADING</div>').appendTo(self),
        id = self.id.replace(/^edit/,'');

    // Retrieve textarea from server
    jQuery.get('/getDataForTextArea?id=' + id, function(textareaValue){

        loading.remove();

        var textarea = jQuery('<textarea/>')
            .attr('id', 'txt' + id)
            .val(textareaValue)
            .add(
                 jQuery('<button>Save</button>')
                    .attr('id', 'btnSave' + id)
                    .click(function(){ /* Click handler */ })
            )
            .add(
                 jQuery('<button>Cancel</button>')
                    .attr('id', 'btnCancel' + id)
                    .click(function(){
                        /* Remove nodes */
                        tr.remove();
                    })
            );

        var tr = jQuery('<tr colspan="4"><td/></tr>');

        tr.find('td').append(textarea);
        tr.appendTo(self);

    });

});

Answer 2

简单地

$('<your nodes>').append('<textarea name="...">' + textarea_value + '</textarea>');

或使用$(html)表单：

$('<textarea name="...">' + textarea_value + '</textarea>').appendTo('<your nodes>');

如果您需要重复值，也可以使用$().clone方法。看看official docs。

Answer 3

至于附加textarea，按钮到选定的节点@Nikita Prokopov的答案将成功。但是，当您想要添加callbacks和后端交互时，最好的方法是编写插件。

Answer 4

Nikita Prokopov ......回答了这个问题。我已经和jquery一起工作了一段时间，这就是我发现的。

始终为行动命名如下：

var SubmitText = $('#form-text-idNumber').submit(function {
                       //do stuff here
                       return false;
                  }

不要这样做：

$('#form-text-idNumber').submit(function {
                       //do stuff here
                       return false;
                  }

如果您将操作赋予变量，则不会干扰页面上的其他类似表单

只要给你的所有动作和部分一个变量，你应该做得很好。

使用JQuery添加表单元素

4 个答案: