jquery - 如何使用jquery在li中获取文本框的点击事件

Question

我有一个文本框列表<li>'s。如何获取文本框的点击事件？

它们被放置在一个<div>嵌套中，如下所示。lis 的部分是用 jquery 动态创建的 .. 但点击事件不会像一样触发。我已经尝试过动态发布的 jquery 答案

<div>
   <ul>
        <li><input type="text"></li>
        <li><input type="text"></li>
    </ul>
</div>

谢谢

Answer 1

jQuery 选择器类似于 CSS 选择器。您可以使用相同的模式并将事件处理程序应用于元素。但是，如果您使用类和 id 来识别您的代码，那将非常容易。喜欢

<div id="mydiv">
<!-- Adding ID to the div like this will help you to target your event handler
     To a set of required elements only -->

   <ul>
        <li><input type="text"></li>
        <li><input type="text"></li>
    </ul>
</div>

然后您可以非常简单地捕获文本框上的单击事件

$("#mydiv input[type='text']").on('click', function() {
// ^ Isn't this as same as CSS?

    console.log("I am clicked");
});

即使您应用了事件处理程序，您的标记也将是通用的，并将应用于整个页面中 div 内的所有文本框。

如果您不想更改标记并想将该功能应用于所有输入框。此代码的一般版本是：

$("div :text").on('click', function() {
    console.log('I am clicked');
});

Answer 2

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

你去吧。

Answer 3

$('div ul li input[type=text]').click(function () {
    alert('HI');
}

);

JS 小提琴链接

已编辑

$("body").on("click", "div ul li input[type=text]", function(event){
    alert('HI');
});

更新的 JS 小提琴链接

Answer 4

你有没有尝试过

$("input[name$='TextboxId']").click(function()

{
});

Answer 5

我找到了答案。在我尝试了所有答案后，最终得到了它。为了触发动态创建的文本框的点击事件，我们必须实时使用答案

$("#location input[type='text']").live("click", function(){
    alert("Test");
});

Answer 6

$("div ul li input[type='text']").click (function () {
           // Do your stuff here
});

简单地$("input[type='text']")为所有文本框提供工作正常，无论它们的位置如何。

Answer 7

尝试

$('div li input:text').click(function(){
    //do
})