Question

我正在使用jQuery创建内联编辑输入['text']代码段。

html将是这样的：

<div id="inline">
    <span class="item">Color</span>
</div>

我被困在这里（这是我的代码）：

$('.item').each(function(){
    $(this).click(function(){
        $(this).hide();
        $(this).parent().append(
            '<form method="post" action="" id="inline_form">'+  
            '<input type="text" value="'+ $(this).html() +'"> <input type="Submit" value="update" />'+ 
            ' <a href="#" class="cancel">Cancel</a></form>'
        );
    });
 });

我想将点击事件绑定到我上面附加的“.cancel”类，所以当我点击取消时，它会删除表单'#inline_form'并显示'.item'

我试过这个

$('.cancel').each(function(){
    $(this).click(function(){
        $(this).parent('#inline').find('.item').show();
        $(this).parent('#inline_form').remove();
    });
 });

但它没有用。如何选择'.cancel'以便我可以点击它？

Answer 1

我稍微修改了你的代码，我认为这会产生预期的效果：

$('.item').each(function(){
        $(this).click(function(){
                $(this).hide();
                $(this).parent().append(
                        '<form method="post" action="" id="inline_form">'+      
                        '<input type="text" value="'+ $(this).html() +'"> <input type="Submit" value="update" />'+ 
                        ' <a href="#" class="cancel">Cancel</a></form>'
                );

                 $('.cancel').each(function(){
                        $(this).click(function(){
                        $('#inline').find('.item').show();
                        $('#inline_form').remove();
                        });
                 });
        });
 });

这里的关键点是你必须在创建链接的同时分配取消功能，因为在此之前链接不存在。

请注意，使用id字符串进行parent()调用是多余的，因为您的ID必须是唯一的。只有一个元素应该具有给定的ID，所以当$(something).parent('#id')始终可以正常工作时，查找$('#id')没有意义。

使用jQuery从附加元素中选择一个类

1 个答案: