Question

可能重复：
Bind an event handler on a element who’s inserted by the jQuery .html() function

下面是一个简单的jquery脚本。当用户点击#FAC时，会出现一个文本框，输入该值。单击#cs时，#NC中输入的值应显示为警报。但它没有，任何想法为什么？

$('#FAC').click(function() {
        $('#FAC').html('<input type="text" name="NC" id="NC"><input type="button" value="Ok" id="CS">');
    });

    $('#NC').click(function() {
        alert($('#NC').val());

    });

Answer 1

如果我完全理解你的问题，请试试这个：

JSFIDDLE

$('#FAC').bind("click",function() {
    $('#FAC').unbind("click");
    $(this).html('<input type="text" name="NC" id="NC"><input type="button" value="Ok" id="CS">');
})

$(document).on('click', '#CS', function() {
    alert($('#NC').val());

});

Answer 2

仅当点击ID为<input id="NC" />的元素时，FAC文本框才会添加到文档中，因此立即使用$('#NC')将无法找到任何附加您的元素点击处理程序到。

有两个选项，可以在文档中添加点击处理程序：

$('#FAC').click(function() {
    $('#FAC').html('<input type="text" name="NC" id="NC"><input type="button" value="Ok" id="CS">');
    $('#NC').click(function() { /* alert here */ });
});

或在按NC ID：

过滤点击次数的元素上添加委托处理程序

$('#FAC').click(function() {
    $('#FAC').html('<input type="text" name="NC" id="NC"><input type="button" value="Ok" id="CS">');
});
$(document).on('click', '#NC', function() { /* alert here */ });

Answer 3

这应该有效：

$('#FAC').click(function() {
   $('#FAC').html('<input type="text" name="NC" id="NC"><input type="button" value="Ok" id="CS">');
   $('#FAC').unbind('click'); // to stop events bubbling up to the parent
});

$('#CS').on('click',function() {
    alert($('#NC').val());
});

请注意，您希望在点击#CS时显示提醒值，但已在#NC点击事件中尝试显示。

此外，由于#NC和#CS是动态创建的，因此您无法使用直接.click()方法。相反，您需要.on()方法

.html（）添加输入框值不带警报值

3 个答案: