jquery - 影响所有元素的类选择器

Question

我正在尝试创建一个自定义列表框以将所选值设置为活动文本框，但它正在更改所有文本框（在我的示例中为 2）。我的 JQuery 部分：

$(".txtList").click(function(event) {
    var txtObj=$(this);     
    $("#lstSR").show();
    $("#lstSR TR").click(function(event) {
        var txtIndex =($(this).find('td:eq(0)').text() ); 
        txtObj.val($(this).find('td:eq(1)').text() );
        $("#lstSR").hide();
    });
});

我的 HTML 部分：

<form id="form1" name="form1" method="post" action="">
<label for="txtList">My label</label>
<input type="text" name="txtList" class="txtList" />
<label for="txtList">My label 2</label>
<input type="text" name="txtList2" class="txtList" />
</form>

Answer 1

每次单击任何文本框时，您都会绑定其他处理程序，这就是它“影响所有元素”的原因。

在不进行完整的代码优化的情况下，通过最小的代码更改进行修复将是在绑定新的单击处理程序之前简单地取消绑定：

("#lstSR TR").unbind("click").click(function(event) {
    //...
}

现场测试用例。