1

可能重复：
在由 jQuery .html() 函数插入的元素上绑定事件处理程序

下面是一个简单的 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());

    });
4

3 回答 3

2

如果我很好地理解了您的问题，请尝试以下操作：

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());

});
于 2012-11-21T07:50:55.067 回答
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 */ });
于 2012-11-21T07:55:57.367 回答
0

这应该有效： 

$('#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单击事件。

此外，由于#NCand#CS是动态创建的，因此您不能使用直接.click()方法。相反，您需要一个.on()方法

于 2012-11-21T07:57:18.157 回答