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 event delegation：

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

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

Answer 2

使用此：

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

以上是您使用事件委派的方式。您也可以在<input>存在后进行绑定。

DEMO

Answer 3

您需要在插入后绑定输入。因为当您执行$("input[type='text']")时，input不存在。它会一直存在，直到您点击submit。

      $("#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点击输入[type =＆＃39;＆＃39;]不起作用

3 个答案:

DEMO