jQuery 语法/逻辑查询答案

【问题标题】：jQuery syntax / logic queryjQuery 语法/逻辑查询
【发布时间】：2011-10-19 09:40:41
【问题描述】：

我已经将一些代码放在一起，这些代码部分有效并且在 Firebug 中不会引发任何错误。

jQuery( document ).ready( function( $ ) {

    var i = jQuery('[name="reference[]"]').size() + 1;

    jQuery('a#add_reference').click(function() {
        input_code = '<div class="reference">' +
            '<input type="hidden" value="" name="reference[]" />' +
            '<h3>Reference #' + i + '</h3>' +
            '<div class="line double">' +
                '<label>Author(s)</label> <input type="text" name="ref_authors" />' +
                '<label>Publisher</label> <input type="text" name="ref_publisher" />' +
            '</div>' +
            '<div class="line double">' +
                '<label>Publication Year</label> <input type="text" name="ref_pub_year" />' +
                '<label>Page Number(s)</label> <input type="text" name="ref_page_nums" />' +
            '</div>' +
            '<div class="line"><label>Document Title</label> <input type="text" name="ref_doc_title" /></div>' +
            '<div style="clear:both;">&nbsp;</div>' +
            '<p>Click <a href="javascript:void(0);" id="' + i + '_del_reference">here</a> to remove Reference #' + i + '.</p>' +
        '</div>';

        jQuery(input_code).appendTo('#references_wrapper');

        i++;
    });

    jQuery('[id="' + i + '_del_reference"]').click(removeBox);
    jQuery('[id="1_del_reference"]').click(removeBox);

    var removeBox = function() {
        jQuery( this ).parents('div.reference').remove();
        return false;
    };


});

HTML 随附：

<div id="references_wrapper">
        <p>Click <a href="javascript:void(0);" id="add_reference">here</a> to add a new reference.</p>
        <div class="reference">
            <input type="hidden" value="" name="reference[]" />
            <h3>Reference #1</h3>
            <div class="line double">
                <label>Author(s)</label> <input type="text" name="ref_authors" />
                <label>Publisher</label> <input type="text" name="ref_publisher" />
            </div>
            <div class="line double">
                <label>Publication Year</label> <input type="text" name="ref_pub_year" />
                <label>Page Number(s)</label> <input type="text" name="ref_page_nums" />
            </div>
            <div class="line"><label>Document Title</label> <input type="text" name="ref_doc_title" /></div>
            <div style="clear:both;">&nbsp;</div>
            <p>Click <a href="javascript:void(0);" id="1_del_reference">here</a> to remove Reference #1.</p>
        </div>
    </div>

问题是我可以添加引用但不能删除它们。

有人可以指出我哪里出错了吗？令人沮丧的是我已经做过几次这种事情（效果略有不同），但我仍然无法让它工作！

提前致谢。

【问题讨论】：

有什么问题？您没有提到预期的行为，以及它与代码实际执行的行为有何不同。
嘿，这就是你出错的地方 - 你还没有告诉我们你的问题 :)
顺便说一句，对于这种基本上是在尝试进行客户端模板的代码，请尝试查看 jQuery tmpl：api.jquery.com/jquery.tmpl
亲爱的我，你在现场 - 很抱歉，不知道我的头在哪里。幸运的是 f0x 是通灵的！

标签： jquery syntax logic

【解决方案1】：

小逻辑错误；您在没有分配事件处理程序的情况下增加变量 i （因此您无法正确删除引用）。将其更改为 .live() 以容纳带有事件处理程序的新对象。

更新小提琴：http://jsfiddle.net/UZkjE/

【讨论】：