追加和删除不能正常工作

时间:2013-07-18 16:20:19

标签: javascript jquery html

出于某种奇怪的原因,我的附加只是添加但不是删除。

这是HTML:

<div class="insert-links"></div>
<a href="#" id="button" onclick="return false;"> 
<img src="http://a.dryicons.com/images/icon_sets/blue_extended_icons_set/png/64x64/add.png" ">
</a>

,jQuery如下:

<script type='text/javascript'>//<![CDATA[ 
$(function() {
    var i = 0;

    $('#button').click(function() {
        if (i < 10) {
            $('.insert-links').append('<p style="display: none;" class="new-link"><input tabindex="1" placeholder="Command eg: give #user# 264"  style="width:285px\;margin-top: 12px\;" type="text" name="fname" id="fname"/> <input tabindex="1" placeholder="Price" style="width:45px\;background-color:#f4faff\;" title="Price in points of this item" type="text" name="fname" id="fname"/><a href="#" id="buttonremove" onclick="return false;"><img src="http://c.dryicons.com/images/icon_sets/blue_extended_icons_set/png/128x128/remove.png" style="width: 20px;float: right;margin-top: 19px;margin-right: 19px;"></a></p>');
            $('.insert-links').find(".new-link:last").slideDown("slow");
            i++;
        }
    });

    $('#buttonremove').click(function() {
        if (i > 0) {
            $('#buttonremove').parent('p').remove();
            i--;
        }
    });
});//]]>  
</script>

有人可以帮帮我吗?

2 个答案:

答案 0 :(得分:2)

使用jQuery Event Delegation

Fiddle Demo

$('.insert-links').on('click', '#buttonremove', function() {
    if (i > 0) {
        $('#buttonremove').parent('p').remove();
        i--;
    }
});

答案 1 :(得分:0)

问题是,当页面加载时,您将click事件绑定到“buttonremove”,在该特定时刻,包含所有其他元素的段落尚不存在。你要做的是在#button。

的点击内移动绑定代码