Question

我有一个HTML表单如下：

<div class="form_row">Add Note<input type="checkbox" name="add_note" id="add_note"></div>
    <div class="form_row" id="addDiv" style="display:none;">
        <div class="form_row">
             <h4><a href="#" id="addScnt">Add Another Input Box</a></h4>
            <div id="p_scents">
                <p>
                    <label for="p_scnts"><input type="text" size="20" name="p_scnt_1"/></label>
                </p>
            <div id="new_notes">
        </div>
    </div>
</div>

javascript是：

$('#add_note').click(function(){
    if($("input[type='checkbox'][name='add_note']:checked").length > 0)
    {
    $('#addDiv').show(500);
    }else{
    $('#addDiv').hide(200);
    }
})

  var i = 2;
$('#addScnt').click(function(){

    var html = ''; 
    html += '<p>';
    html += '<label for="p_scnts"><input type="text" size="20" name="p_scnt_"'+i+'/><a href="#" id="cancel_field">Cancel</a></label>';
    html += '</p>';

    $('#new_notes').append(html);

    i++;
    });
    $('#cancel_field').click(function(){
    alert('Test ')
    $(this).parents('p').remove(); 
});

现在，我的问题是当我点击cancel时，它没有做任何事情，也没有警报也没有删除父div。代码怎么了？

编辑：

JSFiddle Demo

Answer 1

您需要委托，因为它是动态生成的元素：

$('#new_notes').on("click", "#cancel_field", function() { ...

请参阅更新的小提琴：http://jsfiddle.net/tka55/1/

此外，请注意id应该是唯一的，否则在添加多个元素时，您将再次遇到麻烦。

Answer 2

在加载元素后向DOM添加元素时，必须使用bind或on jquery函数将它们绑定到不同的区域。它们不包含在您准备好的DOM中的事件绑定中。

所以你应该这样做：

 var html = ''; 
        html += '<p>';
        html += '<label for="p_scnts"><input type="text" size="20" name="p_scnt_"'+i+'/><a href="#" class="cancel_field">Cancel</a></label>';
        html += '</p>';

        $('#new_notes').append(html);

        i++;
        });
        $('.cancel_field').on('click',function(){
        alert('Test ')
        $(this).parents('p').remove();

Answer 3

你必须使用onclick。如果你使用click，那么监听器将不会附加到添加的元素。

看到这个小提琴：

http://jsfiddle.net/A6Q5C/

$('#new_notes').on('click','#cancel_field',function(){});

当您使用on时，您将它附加到您要动态附加到的父div。

Answer 4

你能试试吗，添加了class="cancel_field"

      var i = 2;
    $('#addScnt').click(function(){

        var html = ''; 
        html += '<p>';
        html += '<label for="p_scnts"><input type="text" size="20" name="p_scnt_"'+i+'/><a href="#" class="cancel_field">Cancel</a></label>';
        html += '</p>';

        $('#new_notes').append(html);

        i++;
        });
        $('.cancel_field').click(function(){
        alert('Test ')
        $(this).parents('p').remove(); 
    });

删除jquery生成的字段不起作用

4 个答案: