jquery单击输入[type ='']不起作用

Question

我在jquery中遇到了.click()事件的问题.我用按钮创建一个输入标签,然后当我点击这个标签时,它必须显示一条警告信息.但它不起作用.这是HTML代码:

<div id="test">

</div>
<input type="button" id="btn" value="Submit" />

和Jquery代码:

$("#btn").click(function(){    
    html = "<input type='text' size='1' name='courses[]' value='1' />";
    $("#test").after(html);
});
$("input[type='text']").on("click", function(){             
    alert('ppp');

});

所有jquery库都链接在真实站点中.这是jsFiddle中的一个例子:http://jsfiddle.net/82pps6Lz/29/ 谢谢

Answer 1

想想,<input>只有在单击按钮时才插入新元素,但是click当<input>元素尚不存在时,您可以立即绑定事件.所以你要么在元素插入之后(或期间)绑定事件:

$('#btn').click(function(){    
    var html = "<input type='text' size='1' name='courses[]' value='1' />";
    $(html).on('click', function() {
        // ...
    }).insertAfter('#test');
});

...或使用DOM事件委托:

$('#btn').click(function(){    
    var html = "<input type='text' size='1' name='courses[]' value='1' />";
    $('#test').after(html);
});

$(document).on('click', 'input[type="text"]' function() {             
    // ...
});